Dial in rounded corners and organic blobs: one slider, four corners, or eight ellipse radii in slash syntax — with live preview and instant CSS.
Radii are computed locally in your browser. Nothing ever leaves your device.
Every CSS corner is a quarter ellipse, and that single sentence explains most of this property. In Simple mode one radius applies to all four corners; in Per-corner mode each corner gets its own; in Blob mode each corner gets an independent horizontal and vertical radius, written with a slash — the left side of the slash is the four horizontal radii, the right side the four vertical ones, both always in top-left, top-right, bottom-right, bottom-left order.
Not with border-radius. A CSS corner is a quarter ellipse, while Apple's squircle keeps curvature continuous — flat near the edge, rounding only in an eased transition. border-radius gets you squircle-adjacent at roughly 22-30% of the side, but real superellipse shapes are a separate, still-experimental property (border-shape / shape() proposals) that is not Baseline and can change, so don't build product UI betting on it.
Yes today. The old Safari bug where a child's background could bleed past a rounded, overflow-hidden parent has been fixed for years; radius plus overflow: hidden behaves the same as in Chrome and Firefox, including during transforms and animations. You only need workarounds if you support very old iOS.
Because radius clips only the element's own background, border and box — never its contents. On an <img> the picture is its own background, so the corner simply follows it; inside a rounded div, children keep painting to the rectangular edges. The fix is overflow: hidden on the rounded wrapper (or give the image the radius directly), and add a box-shadow if you want the silhouette echoed.
Because percentages resolve per axis: on a 240×160 box, 50% horizontal means 120px and 50% vertical means 80px, so each corner is a quarter ellipse, not a quarter circle, and the shape reads as a stadium or lozenge. For circular corners on a rectangle, use a px radius of at least half the shorter side — the browser clamps it — or make the box square.
No. The preview box, the radius math and the CSS output all live in your browser; the value goes from your sliders to your clipboard without a network hop. Nothing is stored and the page keeps working offline.
If you just finished with Border Radius Generator, the natural next steps are Color Converter, HEX to RGB Converter, Color Palette Generator, or browse every tool in Daily Tools.