CSS Border Radius: Eight Values, Ellipses and Organic Shapes
Most uses of border radius are one value on four corners, which is a small fraction of what the property can do. Each corner actually takes two radii, a horizontal and a vertical one, and setting them independently turns a rectangle into a leaf, a ticket stub or an organic blob without a single image. This generator exposes all eight, generates blobs, and shows the scaling factor the browser applies when your radii would make corners overlap, which is behaviour the specification requires and nothing in a browser tells you about. Everything runs in your browser.
Table of Contents
The Syntax, From One Value to Eight
One value applies to every corner. The form almost everyone uses, and the right one when all four corners should match.
Two values pair the diagonals. The first covers top left and bottom right, the second the other two, which is how a leaf shape is made.
Four values go clockwise from the top left. The same order as margin and padding, so the pattern is already familiar.
A slash adds four more. Everything before it is the horizontal radii, everything after is the vertical ones, which is where elliptical corners come from.
How to Use This Generator
Start with a preset or a random blob. Blobs in particular are far easier to find by generating and adjusting than by reasoning about eight numbers.
Switch to elliptical to unlock all eight. Circular mode moves both radii of a corner together, which is the right constraint most of the time and a limitation when making shapes.
Resize the preview. Percentage radii change shape with the element, so a blob tuned at one size can look quite different at another.
Watch for the amber panel. It appears when the browser is scaling your corners down, which explains the otherwise baffling case of one slider making the other corners smaller.
Elliptical Corners and the Slash
Every corner is a quarter ellipse. With equal radii it is a quarter circle, which is the case people picture. Unequal radii stretch it in one direction.
The slash separates the two sets. Horizontal radii first, vertical second, and each side follows the same one to four value shorthand rules.
It is why blobs are possible at all. Eight independent numbers give enough freedom to escape anything that reads as a rounded rectangle.
Support is universal. The elliptical syntax has been in every browser for well over a decade, so there is no compatibility reason to avoid it.
Percentages Against Pixels
Percentages resolve against different dimensions. Horizontal radii against the element width and vertical ones against its height, which is why fifty percent turns a square into a circle and a rectangle into an ellipse.
They scale with the element. A responsive card keeps its proportions, which is usually what you want for a shape and rarely what you want for a button.
Pixels stay put. A twelve pixel radius is twelve pixels at every size, which is why interface components almost always use them.
Blobs need percentages. A blob defined in pixels stops being a blob the moment the element changes size.
The Scaling Rule Nobody Knows
Radii along an edge cannot exceed its length. If the top left and top right horizontal radii add up to more than the width, the corners would overlap.
The browser scales everything by one factor. Not just the offending corner. The specification requires a single factor applied to all eight radii, chosen as the largest one that resolves every overlap.
That is why one corner affects the others. Push one slider too far and the other three visibly shrink, which looks like a bug and is correct behaviour.
The factor is shown above when it applies. Knowing it explains why the shape you typed is not the shape you got, and tells you how much to reduce.
Making Organic Blobs
Eight percentages, all different. That is the entire technique. No SVG, no image, one CSS declaration.
The interesting range is the middle. Values near zero give corners rather than curves, and values near a hundred collapse towards a plain ellipse, so thirty to seventy is where the shapes live.
Asymmetry is the point. If the numbers are too similar the result reads as a slightly wobbly circle rather than an organic shape.
They animate beautifully. Transitioning between two blob values produces a smooth morph, and it is cheap because no path recalculation is involved.
Pills, Circles and the 9999 Trick
A huge pixel value makes a pill. Setting something like 9999 pixels lets the scaling rule clamp it to exactly half the shorter side, which is the pill shape, at any size.
That trick is the scaling rule working for you. The same behaviour that shrinks your carefully chosen corners is what makes this reliable.
Fifty percent gives a circle only on a square. On a rectangle it produces an ellipse, which is correct and frequently not what was wanted.
Half the height is the deliberate version. For a fixed height element, setting the radius to exactly half is more predictable than relying on clamping.
Nested Radii and Optical Correctness
An inner radius should be smaller. When a rounded element sits inside another with padding, using the same radius on both makes the gap look uneven at the corners.
The rule is outer minus the padding. An inner radius of the outer radius less the gap between them keeps the two curves concentric.
The difference is small and very visible. It is one of those details that nobody consciously notices and everybody feels.
Common Mistakes to Avoid
Assuming fifty percent always gives a circle. Only on a square. On anything else it is an ellipse.
Blaming the browser for shrinking corners. It is the specified scaling rule, and the panel above tells you when it is active.
Using pixel radii for blobs. They stop being blobs as soon as the element resizes, because the proportions no longer hold.
Matching inner and outer radii. Concentric curves need the inner one to be smaller by the padding, or the corners look wrong.
Frequently Asked Questions
On the scaling rule: when radii along an edge exceed its length, the browser scales every radius on the element by one shared factor. It is specified behaviour rather than a quirk, and it is what makes the 9999 pixel pill trick reliable.