Border Radius Property
Last updated: 2026-09-13
border-radius Border Radius Property
border-radius rounds the sharp corners of an element, making it one of the most used decorative properties in modern UI design. It accepts length or percentage values, and the larger the value, the more pronounced the rounding. When the radius reaches half the side length or beyond, the corner becomes a semicircle or a full circle.
| Category | |
|---|---|
| Initial Value | 0 |
| Inherited | No |
| Applies To | all |
| Animation Type | length |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
border-radius: <length-percentage>{1,4} [ / <length-percentage>{1,4} ];⚙️ Values
| Value | Type | Description |
|---|---|---|
<length> | Type | Fixed corner radius |
<percentage> | Type | Percentage relative to the element size |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| border-radius | ✓ v4 | ✓ v12 | ✓ v1 | ✓ v3.1 | ✓ v10.5 |
| Supported in all major browsers | |||||
Tip： border-radius: 50% combined with equal width and height draws a perfect circle, commonly used for avatar cropping.
Tip： It accepts 1 to 4 values, and the slash syntax sets horizontal and vertical radii separately, e.g. border-radius: 20px / 10px for elliptical corners.
❓ FAQ
QDoes border-radius work on img elements?
AYes. border-radius applies to the element's border-box edge and works on replaced elements like <img> too. Give an image border-radius: 50% with equal width and height for a circular avatar. Note that image content can overflow the rounded corners, so it is common to add overflow: hidden on the container.
QWhat is the percentage in border-radius relative to?
APercentages are resolved against the element's own width and height — the horizontal radius against the width and the vertical radius against the height. So border-radius: 50% makes a perfect circle on a square element but an ellipse on a rectangle. This is the trick behind circular avatars and pill buttons.
QHow do I draw a perfect circle and a pill shape?
ACircle: equal width and height plus border-radius: 50%. Pill: border-radius: 999px — when the value exceeds half the height, the two ends automatically become full semicircles. On a rectangle, 50% gives an ellipse, so for pills use 999px or a large fixed pixel value instead.
QWhat does the slash syntax border-radius: 20px / 10px mean?
AThe left side of the slash is the horizontal radius and the right side is the vertical radius, producing elliptical corners. For example, border-radius: 50% / 25% makes the horizontal arc wider than the vertical one. Without the slash, the two radii are equal. You can also write two slash-separated groups to shape each of the four corners independently.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
