The 8-value trick
border-radius secretly takes two radii per corner — horizontal and vertical — written as h1 h2 h3 h4 / v1 v2 v3 v4. When they differ, corners become asymmetric ellipse arcs and the box turns organic. That is the entire secret of the "blob" look; fancy mode generates tasteful value sets and you can keep rolling until one fits.
Percentages versus pixels
Pixel radii stay constant as the element resizes; percentages scale with it. For blobs you want percentages, so the shape survives responsive layouts. And the well-known circle trick is just border-radius: 50% on a square element.
Frequently asked questions
Does anything get uploaded?
No. The shape is drawn by the browser itself, so what you see is what the CSS produces.
What does the slash in border-radius do?
It separates horizontal from vertical radii, giving elliptical corners rather than circular ones. That is what produces organic blob shapes.
Why does my rounded corner look wrong on a small element?
A radius larger than half the side is clamped by the browser, so a 50px radius on a 40px box becomes a circle.
Can border-radius be animated?
Yes, and it is comparatively cheap. Animating between two blob shapes is a common and inexpensive effect.
Something wrong with this tool, or an idea for it? Tell us