How to Use This Tool
Drag the numbers and copy the result. Turn on the slash syntax to give each corner a separate vertical radius, which is where the interesting shapes come from.
Four values, or eight
The familiar form sets one radius per corner, in clockwise order from the top left:
border-radius: 20px 10px 30px 5px;
The extended form adds a slash and four more values. Everything before the slash is a horizontal radius and everything after is vertical:
border-radius: 50% 20% 30% 40% / 60% 30% 70% 20%;
When a corner's two radii differ, it becomes a quarter-ellipse instead of a quarter-circle. That is the entire mechanism behind CSS blob shapes, and it needs no SVG, no clip path and no images.
Percentages behave differently from pixels
A percentage radius is relative to the box's own dimensions — horizontal radii to its width, vertical to its height. So a percentage-based shape keeps its proportions when the box resizes, while a pixel-based one does not.
This is also why border-radius: 50% turns a square into a circle and a rectangle into an
ellipse. The radius is half the width in one direction and half the height in the other, which is exactly
an ellipse inscribed in the box.
The scaling rule
If the radii along any edge add up to more than that edge's length, the browser reduces every radius by the same factor until they fit. It does not clip and it does not reduce only the offending corner.
The practical consequence: setting a huge radius to "make it as round as possible" works, and setting
it larger again changes nothing. A 9999px radius and a 50px radius on a 100px-tall box produce the
identical result, which is why the pill-shaped button trick of border-radius: 9999px is safe
at any size.
Two things worth knowing
- The border follows the radius. A rounded box with a border keeps a uniform border width around the curve, and the inner radius shrinks by the border width automatically. Nesting a rounded element inside another looks wrong unless the inner radius is the outer radius minus the padding.
- A squircle is not this. The rounded-square shape used by iOS icons is a superellipse and border-radius cannot make it — the curvature is continuous rather than a circular arc meeting a straight line. The preset here approximates it and does not match it.
