CSS Border Radius Generator
From clean rounded corners to organic blob shapes.
Build any border-radius shape — uniform rounded corners, circles, pills, or fully independent elliptical corners for organic blob shapes — with a live preview and instant, ready-to-paste CSS, all generated locally in your browser.
Common questions
What's the difference between Simple and Advanced mode?+
Simple mode applies one radius to all four corners — perfect for standard rounded cards, buttons, and circles. Advanced mode gives each corner its own independent horizontal and vertical radius, so you can build asymmetric shapes and organic blobs.
Should I use percent or pixels?+
Percent scales with the element's own width and height, so it always stays a perfect circle, pill, or blob no matter how the box resizes — great for responsive components. Pixels give you a fixed, predictable corner radius that stays the same size regardless of the element's dimensions — better for cards, buttons, and inputs.
How do I make a pill or stadium shape?+
Set a pixel value larger than half the element's shortest side (the Pill preset uses 200px). The browser automatically clamps each corner so the short ends come out fully rounded, whatever the box's width.
How do the elliptical corner values work in the CSS?+
border-radius accepts up to eight values as "horizontal values / vertical values", each list ordered top-left, top-right, bottom-right, bottom-left. Advanced mode builds that exact syntax for you, and simplifies it back down to a single value whenever every corner matches.
Is anything I create here saved or uploaded?+
No. The shape is built entirely in your browser — nothing is sent to a server or stored between visits.
More free resources
Have a project in mind? Let's build it.
Tell us about your goals and we'll get back to you within one business day with next steps.
Book a free call