Border Radius Generator

About Border Radius Generator

A border-radius generator builds the CSS to round the corners of an element. Drag a slider for each corner — in pixels or percent — and watch a live preview update, then copy the border-radius rule straight into your stylesheet. Set all four corners the same for a uniform round, or vary them for pills, tabs, and organic shapes. Everything runs in your browser.

Frequently asked questions

How does the CSS border-radius property work?

border-radius rounds an element's corners. One value rounds all four equally; four values set top-left, top-right, bottom-right, and bottom-left in that clockwise order. This tool writes whichever form is shortest.

Can I round each corner independently?

Yes. There's a separate slider for the top-left, top-right, bottom-left, and bottom-right corners, so you can round some corners and leave others square.

Should I use pixels or percent?

Pixels give a fixed corner radius; percent scales with the element's size. A border-radius of 50% on a square makes a perfect circle, which is handy for avatars and dots.

How do I make a pill or circle shape?

For a pill, set a large pixel radius (or 9999px) on a wide button. For a circle, use 50% on an element that's the same width and height.

Is anything uploaded?

No. The preview and CSS are generated entirely in your browser — nothing is sent anywhere.