Border Radius Generator
Generate CSS border-radius code with visual preview for rounded corners and organic shapes. Enter values for instant results with step-by-step formulas.
Reviewed by Daniel Agrici, Founder & Lead Developer
Formula
border-radius: TL TR BR BL
The border-radius shorthand accepts one to four values in clockwise order: top-left, top-right, bottom-right, bottom-left. When fewer values are given, they follow the same pairing rules as margin and padding.
Worked Examples
Example 1: Rounded Card Component
Problem:You need a card with 12px rounded corners on all sides for a dashboard UI component.
Solution:Set all four corner values to 12px.\nborder-radius: 12px;\nThis applies a uniform 12px circular arc to each corner.\nThe shorthand uses a single value since all corners are identical.\nResult: A clean, modern card with consistent rounding.
Result:CSS: border-radius: 12px; — uniform rounded corners for a polished card look.
Example 2: Organic Blob Shape
Problem:Create an organic-looking shape for a decorative background element using asymmetric border-radius values.
Solution:Use different values for each corner to break symmetry.\nTop-left: 30px, Top-right: 70px, Bottom-right: 70px, Bottom-left: 30px\nborder-radius: 30px 70px 70px 30px;\nDiagonal corners share values for a balanced but organic feel.\nThe shape looks natural while maintaining visual harmony.
Result:CSS: border-radius: 30px 70px 70px 30px; — an organic blob perfect for decorative elements.
Frequently Asked Questions
How do I create a perfect circle with border-radius?
To create a perfect circle using CSS border-radius, you need two things: a square element (equal width and height) and a border-radius of 50% or a pixel value equal to half the width. For example, if your element is 200px by 200px, you can use border-radius: 50% or border-radius: 100px. Using 50% is preferred because it scales with the element size and works regardless of the actual dimensions. If your element is not square but rectangular, applying border-radius: 50% will produce an ellipse instead. For a pill-shaped button, you can use a very large value like border-radius: 9999px, which ensures full rounding on the shorter axis regardless of the element dimensions.
What is the difference between px and % for border-radius?
Pixel values and percentage values produce different results with border-radius, especially on rectangular elements. A pixel value creates a corner arc with a fixed radius regardless of the element size, so border-radius: 20px always creates the same curve. Percentages, however, are relative to the element dimensions, with horizontal radii calculated from the width and vertical radii from the height. On a 200x100 rectangle, border-radius: 50% creates an ellipse because 50% of 200px and 50% of 100px yield different horizontal and vertical radii. Pixel values are more predictable for design consistency, while percentages are useful for responsive designs where you want corners to scale proportionally with the element.
Can border-radius values exceed the element size?
Yes, you can set border-radius values larger than the element dimensions, but the browser will automatically clamp them to prevent overlapping corners. According to the CSS specification, when the sum of adjacent border radii exceeds the size of the border box, the browser uniformly reduces all values proportionally until they fit. This means setting border-radius: 9999px on a 200px square element effectively produces the same result as border-radius: 100px, creating a perfect circle. This clamping behavior is actually useful for creating pill-shaped buttons because you can use an arbitrarily large value and the browser handles the math, ensuring the element always looks correct regardless of its actual dimensions.
How do I create organic blob shapes with border-radius?
Organic blob shapes are created by using different border-radius values for each corner, often combined with the slash syntax for elliptical corners. The basic approach is to set four different values like border-radius: 30% 70% 70% 30%. For more complex shapes, CSS supports the eight-value syntax with a slash: border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%, where values before the slash set horizontal radii and values after set vertical radii. This creates asymmetric, organic-looking shapes popular in modern web design. Combining these shapes with CSS animations that transition between different radius values can create fluid morphing effects. Many designers use blob generators to find the perfect values for their creative projects.
References
Reviewed by Daniel Agrici, Founder & Lead Developer · Editorial policy