Border Radius Generator

Mostly for organic 'blob' shapes used in illustrations, where each corner is asymmetric. Standard UI almost always uses uniform or 4-value radii.

% is relative to the element's width/height — so a 50% radius on a square gives a circle, on a rectangle an oval. px is absolute regardless of element size.

Pill = 999px radius assumes the element is wider than tall. On a square element, that just becomes a circle.

All four-value border-radius and elliptical syntax work in every browser since 2010. Universally safe.

Because the browser caps it. When two radii along one edge would overlap, all of them are scaled down by the same factor so they meet exactly instead of crossing. That is why 999px on a 40px box gives a clean pill rather than a broken shape, and why doubling the number changes nothing.

The four-value form runs clockwise from the top-left: top-left, top-right, bottom-right, bottom-left. Three values mean the second one covers both of the corners it sits between, and two values pair the diagonals — the same reading order as margin and padding.