The part of border-radius most tools skip: the slash#
border-radius accepts up to eight values, not four: four horizontal radii, optionally followed by a slash and four vertical radii. border-radius: 60% 40% 30% 70% / 60% 30% 70% 40% produces a genuinely organic, blob-like shape — the technique behind the soft, irregular background shapes common in modern web design. Most border-radius generators only expose the first four values, capable of rounded rectangles and circles but not this asymmetric effect. Setting horizontal and vertical independently per corner is what unlocks it.
How a circle actually works#
A perfect circle from border-radius requires two things: an element with equal width and height, and a radius of 50% on all four corners. 50% is not a magic circle keyword — it works because a corner radius of 50% of a square's side exactly meets in the middle from both directions, rounding the whole shape into a circle. Apply 50% to a non-square element and the result is an ellipse, not a circle.
Why organic shapes need px or a fixed aspect ratio to stay consistent#
A blob shape built with percentage radii looks different depending on the element's exact width and height, since each percentage is relative to the corresponding dimension. For a shape meant to look the same regardless of how the surrounding layout resizes the element, fixed pixel values hold their exact proportions; percentages are more forgiving when the element itself is meant to scale.