border-radius Generator

Syntax

• 1 value: border-radius: 8px — all four corners
• 4 values: top-left, top-right, bottom-right, bottom-left (clockwise from top-left)
• 8 values (elliptic): tl tr br bl / tl tr br bl — first set is horizontal radii, second set vertical
• Percent unit: relative to box width (horizontal) and height (vertical)

Tips

• Pill button: use a value larger than half the height (e.g. 9999px or 50%)
• Circle: square box + border-radius: 50%
• Asymmetric blobs: use elliptic radii like 30% 70% 70% 30% / 30% 30% 70% 70%