CSS Generators·4 min read

Border Radius Beyond Rounded Corners: The 8-Value Blob

Most stylesheets stop at border-radius: 8px, and most developers never find out the property can draw leaves, eggs, and blobs. This is border radius beyond rounded corners: the full syntax accepts up to eight values, four horizontal radii and four vertical ones separated by a slash, and that split is what makes organic shapes possible in pure CSS. You'll see how the browser expands one, four, and eight values, get a worked blob you can paste today, and learn why an image nested inside a rounded card needs a smaller radius than the card itself.

Open the tool All insights

The border-radius jobs beyond cards and buttons

One property, surprising range.

The everyday uses are settled: 6 to 12px on cards, 9999px on pill buttons, 50% on circular avatars. But the same property also draws the amorphous blob floating behind a hero illustration, the leaf-shaped tag with two sharp and two round corners, and the egg profile that gives a testimonial photo some personality.

Those shapes usually get exported as SVGs because nobody on the team knew the syntax could do it. The cost of the CSS version is one line, and it animates, recolors, and resizes without touching a design tool.

Border radius beyond rounded corners: how the values expand

One value rounds all four corners equally. Four values walk clockwise from the top-left: border-radius: 24px 0 24px 0 rounds two opposite corners and leaves the others sharp, the leaf shape. So far, each corner gets one radius that applies both horizontally and vertically, which always produces a quarter circle.

The slash changes that. Everything before the slash sets the horizontal radii of the four corners; everything after sets the vertical radii. Now a corner can curve 70% of the way across but only 30% of the way down, producing a quarter ellipse instead of a quarter circle. Asymmetric corners are what make a shape read as organic rather than manufactured.

The eight value blob trick in border-radius, worked in full

Copy this one.

Here is the eight value blob trick on a 300px square: border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;. Before the slash: the top-left corner curves 30% of the width, top-right 70%, bottom-right 70%, bottom-left 30%. After the slash, the same corners in the same order get their vertical radii: 30%, 30%, 70%, 70%.

The top-right corner therefore bulges wide (70% across) but shallow (30% down), while the bottom-left does the opposite, and the square melts into a blob. Because every value is a percentage, the shape survives resizing. Better still, two different eight-value sets animate into each other smoothly, which is how those slowly morphing background blobs are built: two keyframes, one property. Dial in your starting four corners with the CSS Border Radius Generator, then extend the copied line with a slash by hand.

Radius and nested elements: matching inner corners

Put an 8px-radius image inside a 16px-radius card with 8px of padding and something looks subtly off: the inner and outer curves aren't concentric. The rule that fixes it: inner radius equals outer radius minus the gap between the boxes. A 16px card with 8px padding wants an 8px radius on its child; with 4px padding, a 12px child radius.

When the padding is zero, skip the arithmetic entirely: give the parent overflow: hidden and let it crop the child's corners itself. One rounded box doing the clipping beats two boxes pretending to agree.

Border-radius mistakes that flatten the effect

The failure modes are quiet; the shape just looks slightly wrong:

Radii bigger than half the shortest side get clamped. Two 150px corners on a 200px box render as if you'd written 100px, so cranking values past the clamp changes nothing.
50% on a non-square element makes an oval, not a rounded rectangle. For a capsule, use a large pixel value like 9999px instead.
Children with square corners poke through a parent's curve. Add overflow: hidden to the parent or a matching radius to the child.
Unequal border widths distort the curve, since the radius traces the outer edge while the inner edge follows the border. Chunky mixed borders plus big radii need visual checking.
Copying a pixel radius from a mockup drawn at 2x. A 32px Figma corner on a 2x artboard is a 16px corner in CSS.

Small border-radius habits worth adopting

Define your radius scale as custom properties, something like --radius-sm: 6px, --radius-lg: 16px, and reference them everywhere. Corner rounding is one of the fastest ways to spot an inconsistent UI, and tokens make the whole app adjustable from one place.

For morphing blob decorations, keep the animation slow, eight seconds or more with alternate direction. Fast radius morphs look wobbly and cheap; slow ones read as ambient motion. And because the browser repaints on each frame, reserve the effect for a couple of decorative elements, not a grid of fifty.

Border-radius or clip-path for the shape in front of you

Radius only ever draws curves that blend into straight sides. If the design shows a beveled corner, a notch, an arrow, or any edge you'd describe with straight lines, that's polygon work: open the CSS Clip Path Generator and place the points instead.

There's a practical tiebreaker, too. Border-radius keeps box-shadow working, since the shadow follows the rounded outline, while clipped shapes cut their shadows off. If the element needs elevation, build the depth in the CSS Box Shadow Generator and let radius handle the shape; save clipping for flat graphics.