CSS Border Radius: Shorthand, Percentages, and Round Corners
How border-radius really works — the four-value shorthand, px vs %, the circle and pill recipes, and why big radii get scaled down by the browser.
border-radius looks like the simplest property in CSS. One value, corners get round, done. Then one day you type border-radius: 50% on a button and get a lens shape instead of a pill, or you set 100px on a small card and the browser quietly renders something closer to 60px. Both behaviors are in the spec. Neither is obvious.
If you just want the code, the CSS Border Radius Generator gives you a slider per corner and the shortest valid declaration to copy. The rest of this post is about what those values actually mean.
The shorthand reads clockwise from the top left
With four values, the order is top-left, top-right, bottom-right, bottom-left:
border-radius: 8px 24px 40px 4px;Same collapsing rules as margin and padding. If the bottom-left equals the top-right, drop it and you have three values. If the bottom-right also equals the top-left, you’re down to two. All four equal: one value.
So border-radius: 8px 24px means “8px on top-left and bottom-right, 24px on the other two.” That two-value form trips people up because it pairs diagonal corners, not top/bottom like margin does with sides. I’ve seen this cause a genuinely wrong layout exactly once, but it took the developer half an hour to spot it.
px and % are different tools
A pixel radius is absolute. 16px rounding looks identical on a small button and a full-width hero card, which is usually what a design system wants — Tailwind’s rounded-xl is just 12px everywhere.
A percentage radius scales with the element, and here’s the catch: it’s computed per axis. The horizontal radius comes from the element’s width, the vertical one from its height. On a 300×100 card, border-radius: 50% gives each corner a 150px horizontal curve and a 50px vertical curve. That’s an ellipse quarter, not a circle quarter — the lens shape from the intro.
Percentages are the right choice in exactly one common case: a square element you want perfectly round. Avatars, dots, badges. 50% and you’re done.
Pills without the math
For a pill-shaped button you don’t need to measure anything. Set a fixed radius far larger than the element could ever be:
border-radius: 9999px;This works because of a rule in the CSS Backgrounds and Borders spec: when adjacent radii would overlap, the browser scales all of them down proportionally until they fit. A 9999px radius on a 40px-tall button gets reduced to 20px per corner — exactly half the height, exactly a pill. Tailwind’s rounded-full is literally this value.
The same rule explains the mystery from the intro. Set 100px radii on a 120px-tall box and adjacent corners would need 200px of shared edge that doesn’t exist, so everything shrinks. Your radius isn’t broken; it’s being clamped.
Two things that bite later
Rounded corners don’t clip children. The background and border curve, but an <img> inside the card will happily poke its square corners past the curve. Add overflow: hidden to the rounded element and the children get clipped to the same shape.
And if you draw an outline for accessibility, note that outline follows the rounded shape in every modern browser now — but only since Chrome 94 (late 2021). If your analytics still show older browsers, test the focus ring on rounded buttons.
Play with the sliders in the CSS Border Radius Generator — link the corners for symmetric shapes or unlink them for blobs, and copy the shorthand when it looks right.