border-radius
The border-radius property rounds the corners of an element's border box.
Syntax
border-radius: <length|%>{1,4} / <length|%>{1,4};
Examples
.avatar { border-radius: 50%; }
.card { border-radius: 12px; }
.pill { border-radius: 999px; }
Output
Renders a circular avatar, a softly rounded card, and a fully pill-shaped element.
Notes
50% on a square makes a circle; a very large value makes a pill. Provide up to four values for individual corners and use the slash syntax for elliptical corners.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 4.0 |
| firefox | 4.0 |
| safari | 5.0 |
| edge | 12 |