Border Radius Generator

border-radiusrounds the corners of an element's border box. The shorthand accepts one to four values (top-left, top-right, bottom-right, bottom-left) or you can target each corner individually with border-top-left-radius and friends. You can also give each corner two values separated by a slash, which sets the horizontal and vertical radius independently to produce elliptical corners.

Units matter

Percentages are relative to the element's dimensions, so a50% radius on a square element produces a perfect circle while the same value on a rectangle produces an ellipse. Usepx or rem for consistent corners regardless of element size — this is what most design systems do. A common token scale is 0, 2, 4, 8, 12, 16, and 9999px for pill-shaped buttons.

Organic squircles

The classic "squircle" look from iOS isn't a standard border-radius — it uses a continuous curve. You can approximate it in CSS by giving a large elliptical radius (e.g. 50% / 30%) or by using mask-image with an SVG superellipse. The newer corner-shape: squircle CSS proposal will make this native eventually, but it's not shipped yet.

Gotchas

• Rounded corners clip background color but not child content unless you also set overflow: hidden.
• Radius values larger than half the element collapse to half — they won't overflow into each other.