Free CSS Border-Radius Generator
Set each corner individually, preview live and copy CSS instantly.
border-radius: 12px;How It Works
Sets each corner of a CSS border-radius individually with live preview and one-click copy of the generated code. Includes presets for common shapes like Pill, Circle, and Subtle rounding. Everything runs in your browser — design UI elements visually and grab production-ready CSS instantly.
When to Use It
- Designing custom button shapes and card components with precise corner rounding.
- Creating pill shapes, circles, or organic blobs using advanced radius combinations.
- Prototyping UI elements and copying production-ready CSS into your stylesheet.
Frequently Asked Questions
Can I set different values per corner?
Yes. Four individual sliders for each corner. The All Corners slider sets all four at once, then you can fine-tune individually.
What presets are available?
Pill (fully rounded sides), Circle (50% radius), Subtle (8px gentle rounding), and more. Clicking a preset updates the preview and CSS code instantly.
Does the CSS work in all browsers?
Yes. border-radius is supported in all modern browsers — Chrome, Firefox, Safari, Edge, and mobile. No vendor prefixes needed. The generated code uses standard CSS3 syntax.
All processing happens in your browser. No data is sent to any server.
These tools are free forever. SARA takes it further.
SARA is your AI assistant on WhatsApp: answers customers, takes bookings, follows up — 24/7, automatically. Try it free for 14 days.
Start your free 14-day trial →