Before border-radius existed, a rounded box took three stacked elements and four corner images, and any change meant re-slicing the artwork. The property replaced all of that with a single declaration that clips the element's own background and border painting to a curved outline. It is one of the highest-leverage lines in CSS: a card, a button, an avatar and a pill-shaped tag are all the same markup with a different number.
The generator works in two modes. In One radius mode a single value drives all four corners and the output is the short form, border-radius: 12px;. In Per corner mode you set top-left, top-right, bottom-right and bottom-left independently and the output becomes the four-value form with a trailing comment recording the order:
border-radius: 6px 24px 6px 24px; /* TL TR BR BL */
That order is not arbitrary. The shorthand follows the same clockwise convention as margin and padding, starting at the top-left. So two values mean top-left and bottom-right get the first, top-right and bottom-left get the second; three values mean the middle pair is shared. The generator always emits all four when the corners differ rather than collapsing to the shorter equivalent, but you can shorten 6px 24px 6px 24px to 6px 24px by hand and get an identical result.
This is the part that trips people up. A percentage radius is not a distance, it is a fraction of the element's own dimensions — and it resolves differently on each axis. The horizontal component of a corner is a percentage of the element's width; the vertical component is a percentage of its height. So border-radius: 50% on a square gives a true circle, while the same declaration on a rectangle gives an elliptical curve at each corner, which is why the tool's Circle preset only produces a circle on a square element. Pixels are absolute and stay circular on any aspect ratio; percentages adapt as the element resizes, which is usually what you want for a card that changes width with the viewport but not what you want for an avatar.
| Preset | Value | Result on a typical element |
|---|---|---|
| Sharp | 0 px | Square corners, the property's initial value. |
| Small | 6 px | A subtle softening that suits inputs, chips and small cards. |
| Medium | 12 px | The default and the usual choice for a modern panel. |
| Large | 24 px | A pronounced curve, closer to a mobile-style sheet. |
| Circle | 50 % | A circle on a square, an ellipse corner elsewhere. |
| Pill | 9999 px | Fully rounded ends on any size, because the browser scales the value down to fit. |
That last row deserves the explanation. When adjacent radii would overlap along a side, the browser does not overflow — it multiplies every radius by a common factor, just small enough that the curves meet exactly. So 9999px is a safe way to write "round this as much as the box allows", and it is why the Pill preset works identically on a 40px button and a 200px banner.
overflow: hidden to the parent to clip children too — but remember that also clips shadows and turns the element into a scroll container.outline follow the curved shape; older Safari drew a square ring around a circular button. There is no feature query that detects this, so for guaranteed rounded focus rings use box-shadow: 0 0 0 2px — and keep a real outline as well, because box-shadow disappears in forced-colours mode.CSS allows a slash between two sets of radii, the first horizontal and the second vertical, which is how you get genuinely elliptical corners — a different curve on the x and y axes:
border-radius: 40px 10px / 10px 40px;
Here the top-left corner curves 40px across and 10px down while the top-right does the opposite, producing a leaf-like shape no single radius can express. The generator's unit switch is global, so mixing pixels and percentages across corners also means editing the output by hand.
Because the percentage resolves against the element's width on the horizontal axis and its height on the vertical one. On a 200 by 100 box, 50% means a 100px horizontal radius and a 50px vertical radius. Make the element square, or use pixels, if you need a true circle.
Slightly. Rounded corners require the element to be clipped during rasterisation, and a very large radius on a big surface costs a little more. Animating the radius repaints the element every frame, so it is not a cheap property to animate.
Yes. Use per-corner mode and set the other three to zero, which is the standard way to build a tab or a speech-bubble tail.
Yes. Replaced elements such as img and video are clipped to the rounded shape, which is why avatars are usually just an image with border-radius: 50% and a square aspect ratio.
Anything beyond half the shortest side is clipped to exactly half the shortest side, so large numbers are harmless. Writing 9999px is a deliberate signal that you want the maximum the box allows.