Border Radius Beyond Four Numbers: 8 Corners, Ellipses, and Blob Shapes in CSS

Almost everyone learns border-radius the same way: one number rounds all four corners, four numbers round each corner separately, done. That covers buttons and cards, and for a long time it covered everything I needed. Then a designer handed me a Figma file with a lemon-shaped tag, a coupon with notched corners, and a hero background that wobbled like a slow lava lamp — and the four-number mental model fell apart completely. None of those shapes are reachable with one radius per corner. The property has always been able to do more; most of us just never met the rest of it.

This guide walks through the full syntax, why eight values exist, how elliptical corners and blob shapes actually work, and how to get clean, copy-ready output without hand-counting numbers.

The eight-value syntax nobody mentions

Here is the part the tutorials skip. The border-radius shorthand accepts up to eight values, split into two groups by a slash:

border-radius: H1 H2 H3 H4 / V1 V2 V3 V4;

The first group is the horizontal radius of each corner, in order: top-left, top-right, bottom-right, bottom-left. The second group is the vertical radius for those same four corners. When you write the everyday border-radius: 12px, the browser is quietly expanding it to 12px 12px 12px 12px / 12px 12px 12px 12px — every horizontal radius equals its vertical radius, so every corner is a perfect quarter-circle.

The moment H and V differ at a corner, that corner becomes a quarter-ellipse instead of a quarter-circle. A wide, shallow bend on top with a tight curve on the side. That single fact is the door to every "impossible" shape: leaves, lemons, eggs, talk bubbles, and the organic blobs that have been all over hero sections lately. The MDN reference for border-radius spells out this two-axis-per-corner model, and once you read it the shorthand stops looking arbitrary — it's just four ellipses, each defined by a width and a height.

The catch is authoring it by hand. Eight numbers, two interdependent groups, corners in clockwise order starting top-left — it is genuinely hard to eyeball, and one transposed value flips the whole shape. That's exactly the friction the CSS Border Radius Generator removes: eight independent sliders, a live preview that is a real DOM box (not a canvas mock-up), and output that's guaranteed to match what you see.

A real input, a real output

Let me make this concrete with an asymmetric shape. Say I want a leaf: sharp on the top-left and bottom-right, soft and bulging on the other diagonal. I drag the sliders until the preview reads right, and the tool emits:

border-radius: 0 100% 0 100% / 100% 0 100% 0;

Read it as two passes. Horizontally, top-left is 0 (a hard corner), top-right is 100%, bottom-right is 0, bottom-left is 100%. Vertically, the pattern is offset. The result is two pointed tips on one diagonal and two full bulges on the other — a leaf, from one declaration, no SVG required.

Now a true blob. With a seed of 4827 and moderate complexity, the generator samples eight values around the 50% mark and produces something like:

border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;

Every corner has a slightly different horizontal and vertical radius, so no two corners curve alike — that asymmetry is what reads as "organic" rather than "rounded rectangle." The important detail: the seed is deterministic. Ship the number 4827 to a teammate and they regenerate the exact same blob, so the shape lives in your codebase as one integer instead of eight fragile percentages.

Where blob shapes earn their keep

Blobs aren't just decoration. The most common use I reach for is a morphing background behind a headline. The trick is that border-radius interpolates value-by-value, so a transition between two configs is smooth — if both keyframes are written out in full eight-value form with the same unit. Let the browser fall back to a short form mid-animation and the interpolation breaks.

A reliable recipe: generate three blob configs from the same seed but different complexity (say 0.3, 0.6, 0.9), write each as an explicit eight-value declaration, and loop them in @keyframes over 10–12 seconds.

@keyframes wobble {
  0%   { border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; }
  50%  { border-radius: 45% 55% 48% 52% / 36% 61% 39% 64%; }
  100% { border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; }
}

Pair it with a gradient and a barely-there transform: rotate() and you get that slow, alive feel — with zero JavaScript, zero animation library, and not a single network request. If you want the gradient too, our gradient generator hands you a matching CSS background to drop straight into the same box.

Shortest valid CSS, automatically

One quiet quality-of-life detail worth calling out: good output collapses itself. When all eight values are identical the declaration should be border-radius: 30%;, not the verbose eight-number version that renders identically. When every corner's horizontal radius equals its vertical radius, the slash and the second group disappear and you get the familiar four-value form. Only a real per-corner H/V asymmetry — blobs, leaves, lemons — forces the full eight-value slash syntax to appear.

This matters for design systems. If you're locking a card radius into a token, you want --radius-card: 8px, not four repeated 8px that a reviewer has to verify by eye. The principle is simple: emit the shortest valid CSS that still renders the exact same shape. It keeps tokens clean and diffs honest.

CSS for the box, SVG path for everything else

The rendered element border is best left to CSS — the browser draws true elliptical arcs from your border-radius values, pixel-perfect at any zoom. But sometimes you need the shape itself outside the box: as a background, a decorative element, or a mask. That's where an exported SVG path comes in.

Each corner of the path is drawn with a single cubic bézier using the classic 0.5523 control-point ratio that approximates a quarter circle — the same constant Illustrator and Sketch use, accurate to roughly 0.027% of the arc radius, visually indistinguishable from a real arc. Drop that path into a <path>, a <clipPath>, or an SVG background-image and the shape scales without pixelation from a 320px mobile card to a 1440px banner.

The classic case is a notched ticket or coupon shape, which is miserable to hand-write. Generate it, copy the path, and feed it into the clip-path generator workflow to mask a product image — one definition, every breakpoint. Just remember the division of labor: CSS output for the actual element border, SVG path for masks and backgrounds. Treating the bézier approximation as a pixel-exact UI border is the one mistake that'll bite you in review.

When to scale and when to fix

A last practical decision: % versus px. Use percentages when you want curvature to scale with the element — a responsive card keeps the same visual roundness as it grows. Use pixels when you want a fixed curvature regardless of size, which is what most design systems standardize on (the ubiquitous "8px card," buttons, chips). A good generator switches units without dropping your shape: the numbers stay put, only the unit string changes, so you can compare the same config under both interpretations before committing.

Border radius is one of those properties that looks fully explored after week one and then keeps rewarding anyone who reads the spec. Four numbers get you rounded corners. Eight numbers get you ellipses, leaves, squircles, and blobs — the whole organic vocabulary, all from a single CSS line.

---

Made by Toolora · Updated 2026-06-13