What does the slash in a border-radius value mean?

The slash separates horizontal radii from vertical radii. In border-radius a b c d / e f g h, the first four numbers set how far each corner curves along the top and bottom edges, and the four after the slash set how far it curves along the left and right edges. Equal pairs make a quarter-circle; unequal pairs make an ellipse.

When should I use percent instead of pixels?

Use pixels when you want corners that stay the same size regardless of the element, such as a 12px rounded button. Use percent when the curve should scale with the element — 50 percent on every corner turns any box into a perfect circle or ellipse, and mixed percentages create blob and leaf shapes.

How do I make a perfect circle or pill shape?

For a circle, set every corner to 50 percent on a square box. For a pill or stadium shape, use a very large pixel radius such as 999px on all corners of a wide, short box; the radius is automatically capped at half the shorter side.

Why does my radius look smaller than the number I entered?

Browsers cap each corner so adjacent corners never overlap. If the sum of two radii along an edge exceeds the edge length, all radii on the box are scaled down proportionally. Increase the box size or lower the radius to see the full curve.

Can I create asymmetric organic blob shapes?

Yes. Switch to percent units, turn off both Link all corners and Circular corners, then give each corner different horizontal and vertical values. The Blob and Leaf presets are good starting points you can then fine-tune.

Is my data sent anywhere?

No. The generator runs entirely in your browser using plain CSS and a small amount of JavaScript. Your settings are saved only to this browser via local storage, and the SVG export is generated locally — nothing is uploaded.

Border Radius Generator (Elliptical, Per-Corner)

A visual CSS border-radius generator that goes far beyond a single rounding slider. Every one of the four corners has its own horizontal and vertical radius, so you can build true elliptical corners, perfect circles, pills, speech bubbles and organic blob shapes — then copy the exact CSS or export an SVG. It is built for front-end developers, designers and anyone tweaking a button, card or avatar who wants to see the shape change in real time instead of guessing numbers.

The CSS border-radius property is deceptively powerful. Most people only ever set one value, but the full syntax accepts up to eight numbers split by a slash: four horizontal radii and four vertical radii. That is what lets a single rounded rectangle morph into an egg, a leaf or a freeform blob. This tool exposes all of that without making you memorise the order, and it keeps a live preview, presets and a clean copy button one click away. Everything is computed in your browser, your settings persist between visits via local storage, and nothing is ever uploaded.

How it works

Pick a unit first. Pixels give corners a fixed size; percent makes each radius a fraction of the box, which is what enables circles and stretchy organic shapes. Then shape the corners. With Link all corners on, dragging any slider moves all four together for quick uniform rounding. Turn it off to sculpt each corner on its own. Turn off Circular corners to split each corner into a separate horizontal and vertical control — the moment those two numbers differ, the corner becomes an ellipse rather than a quarter-circle.

Under the hood the tool serialises your corners into the tightest valid CSS it can. If every corner shares the same value it emits a single number; if all corners are circular it drops the slash form entirely; otherwise it produces the full a b c d / e f g h shorthand. The preview element applies that exact string, so what you see is precisely what a browser will render. The SVG export converts your radii — including percentages, resolved against the preview box — into an accurate rounded-rectangle path you can drop into Figma, Illustrator or an icon set.

Example

Suppose you want a soft app-card corner: choose pixels, keep Link and Circular on, and drag to 16px. The output is simply border-radius: 16px;. Now imagine a chat speech bubble with three rounded corners and one sharp tail corner — the Speech bubble preset produces border-radius: 20px 20px 20px 0;. Push further into an elliptical look by switching to percent, unlinking the corners and unchecking Circular, then giving the top-left corner a horizontal radius of 40 and a vertical radius of 60. You will see a value such as border-radius: 40% 60% 35% 65% / 60% 40% 65% 35%; — a smooth, asymmetric blob you could never reach with a single slider. Copy the rule and paste it straight into your stylesheet.

Shape	Typical value
Rounded card	`border-radius: 16px;`
Pill button	`border-radius: 999px;`
Circle / avatar	`border-radius: 50%;`
Speech bubble	`border-radius: 20px 20px 20px 0;`
Organic blob	`border-radius: 40% 60% 35% 65% / 60% 40% 65% 35%;`

Every value above is one the generator can produce and preview live, and you can refine any of them corner by corner. No numbers are uploaded or stored on a server.