CSS Border-Radius Generator

A border-radius generator creates the CSS for rounded corners, one of the most common styling choices for buttons, cards, avatars and images. Uneven corners are harder to picture from numbers alone, which is where a live preview helps.

This generator rounds all four corners together or each separately, in pixels or percent, previews the shape, and writes the shortest equivalent border-radius shorthand. The settings live in the link, so a shape can be bookmarked or shared with whoever is building the component.

border-radius takes one to four values, clockwise from the top left: one value for all corners; two for top-left/bottom-right and top-right/bottom-left; three for top-left, the top-right/bottom-left pair and bottom-right; four for each corner. The generator writes the shortest form that matches.

Percentages are relative to the element's width and height, so 50% on a square makes a circle and on a rectangle makes an ellipse. Pixel radii stay the same size however big the element gets.