How border-radius works
Each corner is a quarter of an ellipse. With a single value, such as border-radius: 24px, the ellipse is a
circle with a 24 px radius and all four corners match. With four values they go clockwise from the top left:
top-left top-right bottom-right bottom-left. Missing values are copied from the opposite corner, just like
margin: that’s why 0 120px gives you a leaf.
The eight-value syntax and organic shapes
After the slash come the vertical radii: border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%. Each corner then
stops being an arc of a circle and becomes an arc of an ellipse with two different radii, which is how modern websites
make blobs without a single image or SVG. “Free shape” mode always works in percentages, so the shape holds
even when the element changes size.
px or %: which to use
- px for buttons, cards and fields: the rounding stays the same whatever the size.
- 50% for circles (on a square) and ellipses (on a rectangle).
- A huge value, such as
999px, for pills: the browser caps it at half the short side, so the ends are perfectly round whatever the width.
Rounding images
border-radius also clips the content of an <img>, so it’s all you need for round avatars
(border-radius: 50% on a square image). If the element has children that stick out of the corners, add
overflow: hidden. The preview uses an image from the ximg.es generator, which you can
request at the exact size of your layout:
<img src="https://ximg.es/160x160" style="border-radius: 50%" alt="">