CSS Border Radius Generator

Four corners, two radii each, and one slash that almost nobody reads correctly. Without a slash the numbers set both axes at once and every corner is a quarter circle. With one, everything before the slash is a horizontal radius and everything after it is a vertical radius, so each corner becomes a quarter ellipse — that is how organic "blob" shapes are made without an image. The other half of the confusion is that browsers quietly shrink radii that do not fit, by a rule the specification actually spells out. This editor shows both: the declaration you wrote, and the one the box will really use at its current size.

How it is calculated

border-radius: <length-percentage>{1,4} [ / <length-percentage>{1,4} ]?

Each list runs top-left, top-right, bottom-right, bottom-left, and the omitted ones repeat: bottom-left copies top-right, bottom-right copies top-left, top-right copies top-left. That is why "50% 20%" means two opposite pairs. A horizontal percentage is measured against the width of the border box and a vertical one against the height, so the same number is a different distance in each axis.

Source: W3C CSS Backgrounds and Borders Module Level 3 § 4.1 — border-radius takes <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?, the values before the slash set the horizontal radii and the values after the slash set the vertical radii, in the order top-left, top-right, bottom-right, bottom-left

Questions people ask

What does the slash in border-radius: 50% 20% / 10% 40% actually mean?

Everything before the slash is a horizontal radius and everything after it is a vertical radius. That example expands to top-left 50% 10%, top-right 20% 40%, bottom-right 50% 10%, bottom-left 20% 40%. Each corner is a quarter ellipse 50% of the width wide and 10% of the height tall, and so on round the box.

Why are my corners smaller than the numbers I typed?

Because corner curves are not allowed to overlap. When two adjacent radii add up to more than the side they share, the specification tells the browser to compute f = min(Li/Si) across all four sides and, if f is below 1, multiply every radius by it. Its own worked example is a 6em by 2em box with 0.5em 2em 0.5em 2em: the factor is 0.8, so the used radii are 0.4em and 1.6em.

Is 50% the same as half the width?

Only in the horizontal axis. Percentages for the horizontal radius refer to the width of the border box and percentages for the vertical radius refer to its height, so 50% on a wide box is a long flat curve unless you give the vertical axis its own value after a slash.

Why does 100% not give me a circle on a rectangle?

It does give you an ellipse quadrant per corner, but four of them at 100% overlap, so the scaling rule pulls them all back until they meet exactly. On a rectangle that lands on a stadium shape rather than a circle. To get a true circle the box has to be square.

Can I use a negative radius to cut the corner inwards?

No — the specification calls negative values invalid, and a browser that meets it drops the whole declaration rather than guessing. An inward notch is a clipping job, not a rounding one.

Related tools