🎨 Design Tools

Border Radius Generator

Round corners independently and copy the CSS.

Top-left 12
Top-right 12
Bottom-right 12
Bottom-left 12
CSS

About the Border Radius Generator

The Border Radius Generator lets you round each corner of a box independently with sliders and copies the resulting CSS. It is the fast way to get from a rough idea to the exact rounded shape you want.

Frequently asked questions

Yes. Each corner has its own slider, so you can round a single corner, two corners, or all four to different amounts to create asymmetric shapes.

Set every corner to a high value such as 50% on a square element, and the box becomes a circle. The generator's pixel values get you most shapes; switch to percentages in the code for fully responsive circles.