Border Radius Generator
Round corners independently and export shorthand or longhand CSS
Round corners independently and export shorthand or longhand CSS
border-radius: 16px;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.
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.
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.
overflow: hidden.