Understanding border-radius
The shape of a corner.
From rounded buttons to elliptical cards to the squircle — the surprising depth of a single CSS property.
One value, eight values.
The shorthand border-radius: 12px sets a single radius for all four corners. Two values (12px 4px) set top-left/bottom-right and top-right/bottom-left. Four values walk clockwise from the top-left. Add a slash and you get an elliptical corner with a horizontal and vertical radius — border-radius: 50px / 20px draws long flat ellipses. Eight values is the full house: four corners, two radii each.
tl tr br bl / tl tr br bl
Pills vs cards.
Set the radius to anything taller than half the height and CSS clamps it to half — turning a rectangle into a pill. That's why border-radius: 9999px works as a pill recipe: you're asking for more than the box can give and getting the maximum. Cards usually want 8–16 pixels of radius — enough to look soft, not so much that the corner dominates. Buttons want either a fixed small radius matched to the type's x-height or a full pill, never the middle ground.
Nested radii.
When one rounded element sits inside another, the inner radius should equal the outer radius minus the gap. A 16px-radius card with 8px of padding wants its inner content to have a radius of 8px — otherwise the gap between inside and outside curves visibly tapers, which looks subtly wrong. Apple's design guidelines call this concentric-corner alignment, and once you notice it's missing, you can't unsee it.
Squircles, not circles.
Apple's icons aren't drawn with border-radius; they're squircles, a smoother family of shapes whose curvature changes more gradually around the corner. The corner-shape CSS property in the most recent drafts adds a squircle keyword that gets the same look natively. Until it ships everywhere, an SVG or a custom clip- path is the only way to match Apple's look. Plain rounded rectangles are slightly tighter at the very corner.
Border-radius and overflow.
A child element can poke past a parent's rounded corner unless the parent declares overflow: hidden. That's the fix nine times out of ten when the corner of a card image isn't rounding. The exception: position: absolute children don't inherit a clip path, so they ignore the radius even with overflow set. For absolutely-positioned overlays, you need a separate clipping container or a matching border-radius on the child itself.
The radius gets bigger, then smaller.
Over a decade of UI fashion, corners have widened — the square-edged Windows of 2012, the gentle 4px of mid-decade flat design, the aggressive 16–24px of today. Larger radii read as friendly, playful, mobile-app. Smaller radii read as serious, dense, professional. Pick once for a product and stay consistent; the radius is a brand statement as much as a colour or a font.
Read next