How the 8-Value Border-Radius Syntax Creates Organic Blob Shapes

Starting From the Familiar Version

Most developers know border-radius as a single value that rounds all four corners equally, or four values that round each corner independently. What's less commonly known is that border-radius actually accepts up to eight values, separated by a slash, and that's the syntax organic blob shapes are built on.

Reading the Slash Syntax

border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;

The four values before the slash set the horizontal radius for each corner, in order: top-left, top-right, bottom-right, bottom-left. The four values after the slash set the vertical radius for the same four corners, in the same order. Each corner effectively gets its own independent ellipse quarter, rather than a single uniform circular curve.

Why Independent Horizontal and Vertical Values Matter

A standard border-radius corner is a quarter-circle — the same curvature in both directions. Giving each corner separate horizontal and vertical values lets that curve become elliptical instead: broad and gentle in one direction, tighter in the other. Combining four independently elliptical corners is what produces the irregular, hand-drawn-looking silhouette characteristic of a blob — despite being built entirely from precise, calculable geometry.

Not a True Squircle

It's worth being precise here: this technique produces true elliptical curves at each corner, not a mathematically continuous "squircle" curve (the smooth, seamless corner style associated with some app icon designs). For most design purposes the visual difference is negligible, but if you need a mathematically exact squircle, that requires SVG or a CSS mask rather than border-radius alone.

Why It's Computationally Cheap

Unlike properties that affect layout, border-radius is resolved during the paint step of rendering — changing it doesn't force the browser to recalculate the position of surrounding elements. This makes blob shapes (including animated ones) comparatively lightweight from a performance perspective.