Generate CSS border-radius visually. Control all four corners independently, use elliptical values, pick from preset shapes, and copy the CSS or nearest Tailwind class.
Open CSS Border Radius Generator → free, no sign-inCSS border-radius is deceptively flexible — you can control each of the four corners independently, and each corner can have two values (horizontal and vertical radii) for elliptical shapes. This tool gives you live visual feedback as you drag the sliders, offers eight preset shapes (square, pill, circle, leaf, teardrop, and more), and outputs the condensed CSS shorthand plus the nearest matching Tailwind utility class.
No tutorials. No learning curve. Open it and get started.
No server uploads. Everything runs locally in your browser. Your files and data never leave your device.
Completely free. No trial period. No premium tier for basic functionality. No account required. Use it as often as you need.
One job, done well. CSS Border Radius Generator was built to solve a specific problem cleanly. No feature bloat, no ads, no distractions.
What is elliptical border-radius?
Each corner can have two values — horizontal and vertical — giving you oval corners instead of circular ones. The CSS syntax is border-radius: H1 H2 H3 H4 / V1 V2 V3 V4.
Can I lock all corners to move together?
Yes — toggle "Link corners" and all four sliders move in sync.
Does it output Tailwind classes?
Yes — it maps to the nearest Tailwind rounded-* class (rounded, rounded-lg, rounded-full, etc.) and also shows the custom value if none match exactly.
What is a squircle?
A squircle is a shape between a square and a circle — commonly used in iOS app icons. The generator includes it as a preset.
Is this free?
Yes — free with no sign-in.
Free. Instant. No sign-in. Open it and get the job done.
Open CSS Border Radius Generator on Doathingy.com →