CSS Border Radius Generator
Free online border-radius generator. Round each corner with sliders, link them together, preview live, and copy the CSS.
About This Free Online 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 of Our CSS Border Radius Generator
- 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 the CSS Border Radius Generator
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 About CSS Border Radius Generator
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.
Why Choose the CSS Border Radius Generator?
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.