UTILS.
100% in-browser

CSS Border Radius Generator

Adjust each corner radius with a live preview and copy the CSS.

About this tool

Round each corner of a box independently with four sliders and copy the resulting border-radius rule. The preview updates instantly, all in your browser.

Frequently asked questions

In what order are the corners written?
The shorthand lists them clockwise from the top-left: top-left, top-right, bottom-right, then bottom-left.
Can I make a circle?
Set every corner to half the element's width (or higher) on a square box and it becomes a perfect circle.

More tools