UTILS.
Private by default
⬭

CSS Border Radius Generator

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

Your files stay on this device

Files are processed in your browser, never uploaded. The site downloads code and assets to run the tools. No accounts or trackers.

Use Download to save this tool as one HTML file for offline use.

Privacy →

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