CSS Border Radius Generator

Every corner, exactly the shape you want

The CSS border-radius property looks simple until you actually try to build an organic 'blob' shape or an asymmetric leaf/petal — that's when you realize each corner can take two separate values (horizontal and vertical radius) and the shorthand syntax gets unreadable fast. This generator gives you both a quick Simple mode (one slider rounds all four corners together, in px or %) and a full Advanced mode where every corner gets its own horizontal and vertical radius, with a live preview so you can see exactly what shape you're building as you drag.

How to use it

• Start in Simple mode if you just want normal rounded corners — one slider controls all four.
• Switch to Advanced mode for full control over each corner's horizontal and vertical radius independently — this is how you build ellipses, leaves, and blobs.
• Try the one-click presets: Circle, Squircle (a softer, more rounded square popular in modern app icons), Leaf (two opposite corners fully rounded, two left square), and Random Blob for an organic shape to tweak further.
• Copy the finished CSS or a Tailwind arbitrary-value class straight into your project.

Understanding the border-radius shorthand

CSS border-radius accepts up to eight values, split by a slash: the four horizontal radii (top-left, top-right, bottom-right, bottom-left) before the slash, and the four vertical radii after it. When horizontal and vertical are equal for every corner, browsers let you drop the slash and just write four (or fewer) plain values — which is exactly what this tool's Simple mode outputs, keeping your CSS clean when you don't need the full elliptical syntax.

Common questions

How do I make a perfect circle with border-radius?

Set the radius to 50% (or use the Circle preset, which uses a value comfortably above 50% to guarantee full rounding regardless of the element's aspect ratio) on a square element — width and height must match for a true circle.

What's a 'squircle'?

A squircle sits between a square and a circle — softer corners than a typical rounded rectangle but not fully round. It's a popular shape for modern app icons and cards; the Squircle preset gives you a good starting point to fine-tune.

Can I animate border-radius changes?

Yes — border-radius is animatable with a plain CSS transition (e.g. transition: border-radius 0.3s ease), which is a common trick for hover effects that morph a card's shape.

Does border-radius work the same in all browsers?

Yes, it's been supported with consistent syntax across all modern browsers for years, including the two-value-per-corner elliptical syntax this tool's Advanced mode generates.

Why does my border-radius look clipped on a small element?

If your combined corner radii exceed the element's width or height, browsers automatically scale all radii down proportionally so they still fit — this is standard CSS behavior, not a bug.