Simple
Elliptic (8 values)
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.
9999pxor50%) - Circle: square box +
border-radius: 50% - Asymmetric blobs: use elliptic radii like
30% 70% 70% 30% / 30% 30% 70% 70%