▢Border-Radius Generator

The detail worth knowing here is nesting. A card with 16px corners containing an image with 16px corners looks wrong, and it takes a while to work out why.

The inner radius should equal the outer radius minus the padding between them. Sixteen-pixel card, eight pixels of padding, eight-pixel image. Match them exactly and you get a visible sliver of background in each corner — small enough that people feel it rather than see it.

Choosing a value

Four to eight pixels reads as neat and slightly technical. Twelve to twenty-four feels softer and more consumer-facing. A fully rounded pill suits tags and small buttons.

What matters more than the number is having two or three of them and using them everywhere. Store them as custom properties. A site with eleven different corner radii looks unconsidered even when nobody can say why.

Rounding only some corners

The shorthand takes up to four values, clockwise from the top left. 12px 12px 0 0 rounds the top only — which is what a card header flush against its body needs, or a tab attached to the panel below it.

When contents overflow the curve

Border radius shapes the element border, not its children. An image inside a rounded card will square off the corners unless the parent has overflow hidden. This is the most common radius bug and the fix is one line.

Percentages

A percentage radius scales with the element, so 50 percent always produces an ellipse regardless of size. Pixel values stay fixed, which is what you want for buttons and cards — percentages there mean the corner changes shape as the text length changes.

Match inputs and their adjacent buttons. Mismatched radii between a field and the button beside it is one of those inconsistencies people feel without identifying.