CSS Border Radius Generator

The CSS Border Radius Generator rounds the four corners of a box independently and gives you the tidiest possible border-radius value.

Drag a slider for the top-left, top-right, bottom-right and bottom-left corners, choose your unit — pixels, rem, em or percent — and watch a live shape update as you go.

When all four corners match, the tool collapses the value to a single number; when they differ, it writes the full four-value shorthand in the correct order.

Rounded corners are a small detail that does a lot of visual work, and getting them consistent across a component library matters.

Doing the maths by hand is tedious, especially when you want an asymmetric shape or a pill made with a large percentage radius.

This generator makes the relationship obvious: nudge one corner and see both the shape and the exact CSS change together, so there is no guesswork about which value maps to which corner.

Use it for cards, avatars, buttons, badges and the increasingly popular squircle-style shapes.

Percentages give you ellipses and pills, while fixed units give you predictable rounding regardless of element size.

Negative and invalid inputs are clamped to zero so the output is always valid CSS.

It runs entirely in your browser, and the copy button hands you a clean border-radius declaration.