What the CSS Border Radius Generator does
This border radius generator shapes each corner of a box separately - with circular or elliptical curves, in pixels or percentages - previews the result live, and writes the shortest correct border-radius shorthand, including the eight-value slash syntax behind organic blob shapes, plus the longhand properties.
It also tells you when the browser will quietly shrink your radii because adjacent corners do not fit on the box, which is the rule that turns border-radius: 9999px into a perfect pill. All of it is calculated in your browser.
How to use it
- Choose px for fixed curves that stay the same size on any box, or % for curves that scale with the box's width and height.
- Type a horizontal radius for each corner. With circular corners ticked, the vertical radius copies it; untick it to give a corner different horizontal and vertical radii, which makes an elliptical curve.
- Use the examples - organic blob, rounded card, pill, speech bubble - or press Random blob for a new shape built from percentages that always add up to 100% along each side.
- Open Preview box size to test the shape at the width and height you will actually use; the scale-factor statistic shows whether the browser has to shrink your radii.
- Copy the shorthand, the longhand, or a share link that stores only the corner settings.
Reading the results
The shorthand lists horizontal radii clockwise from top-left (top-left, top-right, bottom-right, bottom-left), then, after a slash, the vertical radii in the same order. Values are collapsed the same way margin is: four equal values become one, and a matching opposite pair is dropped.
Circular corners need only the values before the slash. The slash appears only when at least one corner is elliptical.
A scale factor below 1 means the curves on some side add up to more than that side's length, so the browser multiplies every radius by that factor. The shape still renders, but not with the numbers you typed.
Worked example: the organic blob, and why 9999px makes a pill
The blob example is border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;. Along the top edge the horizontal radii are 30% and 70%, adding up to exactly 100% of the width, so the two curves meet in the middle without a straight segment. The same holds on every side, which is why the shape looks continuously curved.
For the pill, every corner is 9999px on a 240 x 180 px box. Along the 180px sides, the two vertical radii add up to 19,998px, so CSS Backgrounds 3 section 5.5 scales every radius by f = 180 / 19,998 = 0.0090. Each radius becomes 9999 x 0.0090 = 90px - exactly half the height - and the ends are perfect semicircles.
Formulas and scoring rules
- Overlap scale factor
f = min(Li / Si) over the four sides, where Si is the sum of the two radii along side i and Li is its lengthIf f < 1, every radius is multiplied by f. Percentages are resolved first: horizontal against the width, vertical against the height.- Shorthand collapse
[a b c d] -> [a b c] when d = b; -> [a b] when also c = a; -> [a] when also b = aApplied separately to the horizontal and vertical lists.
Limitations: what the result does not prove
- Percentages are resolved against the box, so a percentage blob changes proportion when the box does. Test with your real aspect ratio.
- border-radius clips backgrounds and borders but not overflowing children unless the element also has
overflow: hiddenorclip. - Images inside the element need their own radius or an overflow clip; the preview shows only a gradient fill.
- Very small radii on high-density screens can look identical to square corners; check at real size.
Privacy: where your data goes
Everything you paste, type or drop is processed in this browser tab. It is not uploaded, logged, stored or sent to analytics. Session recording and tag-manager scripts are switched off on this page.
Standards and sources
- CSS Backgrounds and Borders Module Level 3 - checked 19 Sep 2026
- W3C - CSS Backgrounds and Borders Level 3: border-radius
- W3C - Overlapping curves (section 5.5)
- MDN - border-radius
Frequently asked questions
What does the slash mean in border-radius?
Values before the slash are the horizontal radii of the four corners; values after it are the vertical radii. When the two lists differ, a corner becomes a quarter ellipse instead of a quarter circle, which is how blob and leaf shapes are made in pure CSS.
Why does border-radius: 50% make a circle only on a square?
50% is resolved separately for each axis: half the width horizontally and half the height vertically. On a square those are equal and you get a circle; on a rectangle you get an ellipse. Use a very large pixel value for pill-shaped ends instead.
Why is 9999px commonly used for pill buttons?
Because radii that overlap are scaled down together until they fit. A huge value is always reduced to half of the shorter side, which gives perfectly round ends at any button size without knowing the height in advance.
In which order are the four corner values written?
Clockwise from the top-left corner: top-left, top-right, bottom-right, bottom-left. With two values the first covers top-left and bottom-right and the second covers top-right and bottom-left; with three values the second covers both top-right and bottom-left.
Should I use px or % for rounded corners?
Use px (or rem) for interface elements such as cards and buttons, where the curve should look the same whatever the size. Use % for organic or decorative shapes that should keep their proportions as the element grows or shrinks.
Does border-radius affect the clickable area of an element?
Yes. Pointer events and hit testing follow the rounded border box, so clicks just outside a curved corner do not reach the element. Keep that in mind for small, heavily rounded touch targets.
Last reviewed by the A2Z.Tools team against the sources listed above.
