Border Radius Generator

What this does

This generator builds a CSS border-radius value from eight sliders — a horizontal (X) and vertical (Y) radius for each of the four corners, all in percent from 0 to 100. The preview box updates as you drag, and the CSS textarea underneath always holds the current declaration ready to copy. Uniform radii collapse to a single value like border-radius: 24%;; anything else is written out in the full slash form. The default is 30% on every corner.

How do I make a blob shape with border-radius?

1. Click the Blob preset to load an asymmetric starting point (top-left 64/36, top-right 30/70, bottom-right 50/40, bottom-left 25/55).
2. Drag any corner's X or Y slider. Pushing X and Y apart on the same corner stretches the arc into an ellipse, which is what makes a shape look organic rather than mechanically rounded.
3. Keep at least one corner tighter than the others — a blob where every corner is at 50% is just an ellipse.
4. Press Copy CSS and paste the declaration onto your element.

The Blob preset serialises to this:

border-radius: 64% 30% 50% 25% / 36% 70% 40% 55%;

The values before the slash are the four horizontal radii (top-left, top-right, bottom-right, bottom-left); the values after it are the matching vertical radii in the same order.

What does the slash in border-radius mean?

CSS lets each corner be an elliptical arc rather than a circular one. The shorthand border-radius: A B C D / E F G H assigns horizontal radii A–D and vertical radii E–H, corner by corner. When you omit the slash, the browser uses the same value for both axes and you get circular corners only. This tool always tracks both axes separately, which is why it can produce leaf and blob shapes that a single-value-per-corner picker cannot.

Why does the pill preset use 50% instead of 9999px?

Percent radii are resolved against the element's own width (for X) and height (for Y), so 50% on all eight values draws a true ellipse that fits the box exactly — on a square element it becomes a circle. The common 9999px trick produces a stadium shape (straight sides, semicircular ends) rather than an ellipse. Both are valid; they are just different shapes. This tool works in percent throughout so the shape scales proportionally with the element and you can reuse the same declaration on boxes of different sizes. If you need a fixed pixel radius on a fixed-size component, write it by hand.

Which presets are included?

• Rounded — 24% on every corner and axis.
• Pill — 50% everywhere, giving an ellipse.
• Blob — the asymmetric eight-value shape shown above.
• Leaf — 80% on the top-left and bottom-right corners, 0% on the other two, which yields the classic leaf or petal outline.
• Reset — 0% on everything, back to a plain rectangle.

Presets replace all eight slider values at once; you can then keep editing from there. The preview box is 200 by 160 pixels, so shapes will look slightly different on an element with another aspect ratio — percent radii follow the box.

Can I get a real squircle with border-radius?

Not exactly. A true squircle (the iOS icon curve) is a superellipse whose curvature changes continuously along the edge, and border-radius can only draw elliptical arcs that meet straight sides. Setting X and Y to around 24–30% on all corners gets visually close for most UI work, and that is what the Rounded preset targets. For exact superellipse geometry you would need clip-path with a path, or an SVG mask.

Where does this fit with other CSS tools?

Rounded shapes usually come with an elevation, so pair the output with the box-shadow generator. The preview fill is a gradient; build your own with the gradient tool, or layer a frosted panel using the glassmorphism generator. Everything here runs in the browser; nothing is sent anywhere.