CSS Border Radius Generator — 8 Corners + Blob Shapes

Real-world use cases

• Shipping a real squircle for app icons and avatar masks

  iOS-style squircles aren't a single radius — they need the H/V asymmetry that four-number generators can't produce. Drop the squircle preset, copy the eight-value form, and apply it to a 120px avatar. Because the curvature is continuous, the corners read as smooth at retina scale instead of the slightly "pinched" look you get from a flat 24px radius on the same box.

• Building a morphing blob background for a hero section

  Generate three blob configs with the same seed (say 4827) but complexity 0.3, 0.6, and 0.9, copy each as an explicit eight-value declaration, and loop them in @keyframes over 12s. You get that slow organic wobble behind a headline without an SVG library or a single network request, and the seed lets a teammate reproduce the exact same three shapes from the number alone.

• Locking a card radius into a design system token

  Your team standardized on an 8px card and a 999px pill. Use Simple mode, set 8px, copy `border-radius: 8px`, paste it as `--radius-card`. Switch to the pill preset for the chip token. The tool collapses identical corners to one number, so the token value stays clean instead of carrying four repeated 8px you'd have to eyeball-verify in review.

• Exporting an SVG clip-path for a ticket or talk-bubble shape

  A coupon card with notched ticket corners is painful to hand-write. Pick the ticket preset, copy the SVG path, and drop it into a `<clipPath>` to mask a product image. Because the path scales without pixelation, the same shape works on a 320px mobile card and a 1440px desktop banner from one definition.

Common pitfalls

• Copying the four-value form for a blob shape — the H/V asymmetry is lost and you get a plain rounded box. Use the eight-value slash output (e.g. `30% 70% 70% 30% / 30% 30% 70% 70%`) for any organic shape.

• Animating between two blobs written in short form — the browser can't interpolate `12px` against `30% 70% ...`. Write both keyframes with all eight values and the same unit so the transition stays smooth.

• Treating the SVG path as pixel-exact for a UI box. It's a 0.5523-bezier approximation meant for backgrounds and clip-path; for the rendered element border itself, use the CSS output, which draws true elliptical arcs.

Privacy