From one value to eight
border-radius: 12px; /* all four corners */
border-radius: 12px 4px; /* TL+BR, then TR+BL */
border-radius: 12px 4px 8px; /* TL, TR+BL, BR */
border-radius: 12px 4px 8px 0; /* TL, TR, BR, BL — clockwise */
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; /* horizontal / vertical */
The four-value form always runs clockwise from the top left. The eight-value form is the one most people never learn, and it is the only way to make an asymmetric, organic shape in pure CSS.
The pill trick
For a button that should have fully rounded ends whatever its height:
border-radius: 9999px;
The browser clamps the radius to half the shorter side, so this works at any size without measuring anything.
When rounding stops helping
- On a full-width section. Rounded corners on something that touches both edges of the viewport read as a rendering mistake.
- On nested elements with the same radius. An inner element needs a smaller radius than its parent, or the gap between them looks uneven. The rule of thumb is inner radius = outer radius − padding.
- Above about 24 px on small elements. The shape stops reading as a rectangle and starts reading as an accident.
Live and local
The preview is a real element with your declaration applied. Everything is computed in your browser and nothing is transmitted.
Questions
What does the slash in border-radius mean?+
It separates horizontal radii from vertical ones. `border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%` gives each corner a different horizontal and vertical radius — eight values in total. Unequal pairs are what turn a rounded rectangle into a blob.
Pixels or percentages?+
Pixels stay constant as the element grows, which is what you want for cards and buttons. Percentages scale with the box, which is what you want for pills, circles and organic shapes. A percentage radius on a wide element produces an ellipse, not a circle.
How do I make a perfect circle?+
`border-radius: 50%` on an element with equal width and height. If the sides are unequal you get an ellipse — which is correct behaviour, not a bug.
What happens if the radii are too big for the element?+
The browser scales all of them down proportionally so they still fit. This is defined behaviour, so `border-radius: 9999px` is a safe way to say "fully rounded ends" without knowing the height.