Border Radius Explained: Corners, Units, and Shorthand

border-radius is one CSS property with four corners and several shorthand forms, and most broken rounded corners trace back to two things: value order or unit choice. Both are mechanical, which means both are checkable.

Four corners, one fixed order

The four-value shorthand reads clockwise starting at the top-left: top-left, top-right, bottom-right, bottom-left. So border-radius: 12px 0px 0px 12px rounds only the two left corners — the classic tab or drawer-pull shape (note the generator keeps the unit on the zero corners, writing 0px rather than bare 0). Fewer values expand in a fixed pattern: two values apply the first to top-left/bottom-right and the second to top-right/bottom-left (the diagonal pairs); three values set top-left, then top-right/bottom-left, then bottom-right; one value rounds all four. The diagonal pairing is why 10px 20px does not round the top corners as a group — a frequent surprise.

Units: fixed corners vs relative corners

Pixels, em, and rem give a corner a fixed roundness regardless of the element's size; percentages scale with the box. That difference is the source of the two famous shapes. On a square element, border-radius: 50% makes a perfect circle, because 50% of each side meets exactly at the middle. On a wide rectangle, the same 50% produces a pill (stadium) instead — each corner's radius is 50% of the shorter side, so the ends round fully while the middle stays straight. Fixed units do the opposite job: border-radius: 16px gives a 200-pixel card and a 40-pixel avatar the same absolute curvature. The generator applies one shared unit across all four corners precisely so the shape stays predictable while you tune the numbers.

When radii overlap, the browser rescales

Corners are allowed to ask for more than the edge can give. If two adjacent radii sum to more than the edge length between them, the browser scales all radii on that edge down by one factor: f = edge ÷ (r1 + r2). This is why border-radius: 999px does not explode a 300-pixel-wide button — the factor shrinks every radius until the curves just meet, leaving the pill shape. It also explains a common bug in reverse: a 40px radius renders visibly smaller on a very small element, because the element's own edges cap it. Big values and percentage values converge on the same safe behavior, which is why 50% and 999px produce near-identical pills.

The shorthand collapse

When all four corners are equal, border-radius: 8px 8px 8px 8px and border-radius: 8px are the same declaration, so the tidy form wins. The generator checks whether all four values match and emits the single-value shorthand when they do — four values only when the corners actually differ. It also validates the unit (px, %, em, or rem) and treats empty corners as zero, so the output is always a paste-ready declaration rather than an approximation you clean up by hand.

Rounding interacts with everything painted on the box

The radius reshapes the box's outline, and the paint follows: backgrounds and borders clip to the rounded curve. Children do not — a square image inside a rounded card will poke out of the corner unless the parent also sets overflow: hidden. Shadows and outlines do follow the curve, so the rounded outline you choose here becomes the outline other effects trace (the ground covered in CSS shadows). For shapes a rounded rectangle cannot make — polygons, stars, cut-out insets — the same element can instead be carved with clip-path, which clips the painting without changing the box: the trade-off is laid out by the CSS Clip Path Generator.

Try it yourself

The Border Radius Generator sets each corner in px, %, em, or rem with a live preview and emits the shortest correct declaration. The CSS Clip Path Generator covers the shapes rounding cannot reach. And the CSS Box Shadow Generator adds depth that follows whatever outline you settled on.