Border radius generator

Set each corner's radius from 0 to 100 percent, separately or all together, preview the shape live, and copy the CSS border-radius shorthand.

About this tool

The generator writes the border-radius shorthand in the standard corner order: top left, top right, bottom right, bottom left. Percentage radii are relative to the box dimensions, so 50 percent on every corner of a square produces a circle, and the same values on a rectangle produce a pill-like ellipse effect. When all four corners match, the output collapses to a single value, which is valid shorthand for the same result.

Common questions

In what order does the shorthand list the corners? Top left, top right, bottom right, then bottom left — clockwise from the top left. A single value sets all four corners at once.

What does 50 percent on every corner make? On a square box, a circle. On a rectangle, fully rounded ends on the shorter axis, because percentages follow each axis of the box.

What is linked mode for? Linked mode drives all four corners from one slider, which is faster for uniform rounding such as cards, buttons and avatars.

Private by design: this tool runs entirely in your browser. Nothing typed, pasted, or opened here is uploaded, stored, or tracked.