CSS Border Radius Generator

About the CSS Border Radius Generator

Our free online CSS border-radius generator lets you round corners exactly how you want and copy the CSS. Drag a slider for each corner — top-left, top-right, bottom-right, bottom-left — or link them all to adjust together, switch between pixels and percent, and watch a live preview. When it looks right, copy the ready-to-use border-radius property into your stylesheet. It runs entirely in your browser with no signup. Perfect for buttons, cards, avatars, and pill shapes.

Features

Round each corner independently or link all four
Pixels or percent units
Live preview as you adjust
Outputs clean shorthand border-radius CSS
Live results, no signup
100% free — runs in your browser

How to use this tool

The CSS Border Radius Generator works right in your browser — no signup, no installation. Follow these steps:

Keep corners linked, or unlink to set each corner separately.
Drag the sliders and switch between px and % as needed.
Watch the live preview update.
Click Copy CSS and paste the border-radius into your stylesheet.

Frequently asked questions

How do I round corners in CSS?

Use the border-radius property. One value rounds all corners equally; four values set top-left, top-right, bottom-right, and bottom-left in order. This tool writes the shorthand for you to copy.

How do I make a circle or pill shape?

Set border-radius to 50% on a square element for a circle, or to a large value (or 9999px) on a wider element for a pill. Switch the unit to % and slide to 50 to preview a circle.

Can I round only one corner?

Yes. Turn off "Link all corners" and adjust just the corner you want — the others stay at 0. The generated CSS uses the four-value shorthand.

Using the results

Skip writing CSS by hand. The CSS Border Radius Generator generates clean, copy-ready code with a live preview, all in your browser — tweak the controls, watch it update in real time, and paste the result straight into your stylesheet.