Every corner has two radii, not one

border-radius takes up to eight values, written top-left top-right bottom-right bottom-left / top-left top-right bottom-right bottom-left. The set before the slash is the horizontal radius of each corner and the set after it is the vertical radius. With one set every corner is a quarter-circle. With both, every corner is a quarter-ellipse, and that is the entire mechanism behind the organic blob shapes people generate elsewhere as four separate rules.

The shorthand collapses exactly like margin: one value for all four corners, two for the diagonal pairs, three when only the two side corners agree, four otherwise. This generator always writes the shortest spelling that means the same thing, because 6px is what a person writes and 6px 6px 6px 6px is what a tool writes.

The same radius looks different on a button and on a card

A radius is read relative to the edge it sits on. 12px on a 36px-tall button eats a third of the height and reads as a pill that did not commit; the same 12px on a 320px card is a barely visible softening. That is why the preview above shows one value on three sizes at once. Design systems solve it with a scale rather than a single number: something like 4px for inputs, 6px to 8px for cards, and a separate full-round value for pills and avatars.

For nested boxes the rule is simple: the inner radius should be the outer radius minus the gap between them. A 16px card containing a 16px image with 8px of padding leaves a visible sliver of card between the two curves. The image wants 8px.

Percentages, pills and the scaling rule

A percentage radius is measured against the box: the horizontal radius against its width and the vertical one against its height. So 50% on a square is a circle and 50% on a wide button is an ellipse whose ends bulge as the label grows. Use a large fixed length instead, 9999px being the usual choice, and the ends stay semicircular at any width. That is what the Pill preset emits.

Nothing here caps a radius at half the box, because the specification already handles it. If the radii on one edge add up to more than that edge's length, the browser computes a single scaling factor f from the worst edge and multiplies every radius by it, so the curves shrink together and never overlap. That is why 9999px is safe rather than broken, and why an element whose corners are all at 50% is a circle rather than a clipped mess.

Common problems

The child's square corners poke out of the rounded parent. A radius clips the background and the border, not the content. Put overflow: hidden on the parent, or give the child the matching inner radius.
A table lost its rounded corners.border-collapse: collapse discards them. Use border-collapse: separate with border-spacing: 0, and round the first and last cells of the first and last rows.
The rounded edge looks fuzzy or gritty. A radius on a box that also has a background image or a gradient is anti-aliased differently across browsers. A hairline border of the same hue as the background usually hides it.
The corner is not a true squircle. It cannot be. border-radius draws quarter-ellipses only, so the continuous curve used on iOS icons is not expressible. The Squircle preset is the closest approximation the property allows; a real superellipse needs an SVG path or corner-shape, which is still new.

Frequently asked questions

Which unit should I use?

Pixels for almost everything: a radius is a physical detail of the shape and it should not grow because someone raised their font size. Use rem if your design system scales its whole geometry with type. Use a percentage only when you want the curve to follow the box, which in practice means circles and blobs.

Why does the Tailwind output sometimes change shape?

Circular corners come out as rounded-[…] with underscores for spaces. Elliptical corners come out as the arbitrary property [border-radius:…] instead, because Tailwind reads a slash after an arbitrary value as an opacity modifier and the eight-value syntax has a slash in the middle of it. Both compile to the declaration shown beside them.

Can I round only one corner?

Yes. Turn off Link all corners and set the other three to zero. The long-hand properties border-top-left-radius and its three siblings exist too, and each of them also takes two values for an elliptical corner.

Does a radius cost anything to render?

Effectively nothing on its own. It becomes measurable when it forces a new paint layer, most often combined with overflow: hidden on a scrolling container, where the browser has to clip every frame against the curve.