🔲 Design tool · 100% in-browser

CSS Border Radius Generator

Dial in rounded corners with a live preview, then copy the border-radius CSS.

All corners (24px)
border-radius: 24px;
🔒 Generated on your device

How to round corners

  1. Link or unlink. One value for all corners, or set each.
  2. Adjust the sliders. Watch the preview update.
  3. Copy the CSS. Paste it into your stylesheet.

Frequently asked questions

Can I round each corner differently?

Yes. Turn off 'Link all corners' to control the top-left, top-right, bottom-right and bottom-left independently.

How do I use the CSS?

Copy the code and paste it into your element's border-radius property.

What values should I use?

Small values (4–8px) give a subtle round; larger values create pill or circle shapes. A value of half the element's size makes a circle.

Is anything uploaded?

No. Everything runs in your browser.