CSS border-radius Property
The border-radius property rounds the corners of an element outer border edge.
Description & Usage
The border-radius property softens rectangular container edges by rounding outer border corners.
Setting border-radius: 50% on a square element creates a perfect circle (commonly used for user profile avatars). Setting large values like 9999px creates pill-shaped buttons.
Property Specifications
| Property Feature | Specification |
|---|---|
| Category | Visual |
| Initial Value | 0 |
| Inherited | No (not inherited) |
| Applies To | All elements |
Syntax
border-radius: 8px | 50% | 9999px;Property Values
| Value | Description |
|---|---|
| 8px | Slightly rounded modern box corners. |
| 50% | Creates a full circle avatar on square elements. |
| 9999px | Creates pill-shaped buttons. |
Code Examples
Circular User Avatar
.avatar {
width: 48px;
height: 48px;
border-radius: 50%;
}
Renders square image as a perfect circle.