Eight independent values, one organic shape
Setting different horizontal and vertical radius values for all four corners produces: border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; -- an irregular, organic blob shape rather than a uniform rounded rectangle.
The slash syntax splits the eight values into two groups of four -- everything before the slash controls horizontal radius for each corner (top-left, top-right, bottom-right, bottom-left, in that order), and everything after controls vertical radius for the same four corners in the same order -- allowing each corner's horizontal and vertical curvature to differ independently.
This is genuinely different from a simple uniform border-radius: 50% (which produces a perfect circle or ellipse) -- by varying all eight values independently, corners can curve at different rates in different directions, producing the kind of asymmetric, hand-drawn-looking blob shapes popular in modern organic web design.
What this technique can't do on its own
Eight-value slash syntax. The preview box is square; real layout still follows the element box. This CSS-only blob technique works within the element's actual box dimensions -- it can't create a shape that extends beyond the element's own width and height, unlike an SVG path or clip-path, which can define arbitrarily complex outlines independent of the underlying box shape.
The preview shown uses a square box specifically to make the blob's curvature easy to see clearly -- applying this same border-radius to a non-square (rectangular) element would still work, but the resulting blob shape would look proportionally different, stretched or squashed relative to the square preview.
Because this relies purely on border-radius rather than a path or polygon, the blob shape is limited to what border-radius corner-rounding math can express -- for a more precise, deliberately-designed organic shape (rather than one built from adjustable percentage values), an actual SVG path gives more direct control over the exact outline.
Related shape and border-styling tools
For a shape built from actual SVG path data rather than CSS border-radius percentages, the SVG Path Optimizer works with that more flexible, precise format.
For a simpler geometric shape (a triangle) built with a related CSS-box technique, the CSS Triangle Generator is a related, simpler CSS-only shape trick.
Frequently Asked Questions (FAQ)
What does the slash in the border-radius value do?
It separates horizontal radius values (before the slash, one per corner) from vertical radius values (after the slash, one per corner) -- letting each of the four corners curve differently in the horizontal versus vertical direction, which is what creates the asymmetric blob shape.
How is this different from a simple border-radius: 50%?
A uniform border-radius: 50% produces a perfect circle or ellipse, with all corners curving identically. This eight-value technique allows every corner's horizontal and vertical curvature to differ independently, producing an irregular, organic shape instead of a symmetric one.
Can this technique create a shape that extends beyond the element's box?
No. Eight-value slash syntax. The preview box is square; real layout still follows the element box. Border-radius only rounds corners within the element's existing width and height -- it can't create a shape extending past those box dimensions. An SVG path or clip-path would be needed for a shape that goes beyond the box.
Would this same border-radius value look the same on a rectangular element as it does on the square preview?
Eight-value slash syntax. The preview box is square; real layout still follows the element box. Not exactly -- the preview uses a square specifically to show the curvature clearly. Applying the same values to a non-square element would still work, but the resulting blob shape would appear proportionally stretched or squashed relative to that preview.
Is there a more precise way to create a custom organic shape than adjusting these eight percentages?
Yes -- an actual SVG path gives direct, precise control over an arbitrary outline, rather than working within what border-radius corner-rounding math can express. For a very specific, deliberately-designed shape, SVG is generally the more capable tool.
