Control all 8 sub-radius values visually. Build blobs, pills, squircles and asymmetric shapes.
border-radius
shorthand accepts 1–4 values before the optional
/
and 1–4 values after it. Values before the slash define horizontal radii; values after define vertical radii. This allows elliptical corners — perfect for blobs and organic shapes.
Percentage values are relative to the element's dimensions: horizontal percentages reference width, vertical percentages reference height.
border-radius: 50%
creates a perfect circle on a square, while a rectangle becomes an ellipse. Pixel values stay fixed regardless of size.
border-radius: 999px
border-radius: 50%
30%
all corners
8px
–
16px