border-radius
Rounds the corners of an element.
Syntax
border-radius: value;Values
| Parameter | Type | Description |
|---|---|---|
| length | length | The corner radius: `8px`. |
| 50% | percentage | On a square element — a circle. |
| four values | length | Corners clockwise from the top left: `10px 0 10px 0`. |
Examples
Rounded corners, a circle and a leaf:
<style>
div { width: 80px; height: 80px; background: coral; display: inline-block; margin: 4px; }
</style>
<div style="border-radius: 8px;"></div>
<div style="border-radius: 50%;"></div>
<div style="border-radius: 40px 0;"></div>A round avatar:
<img src="/media/photo-200x200.jpg" alt="Avatar" width="80" height="80" style="border-radius: 50%;">Notes
The background and border follow the rounding, but children can stick out of the corners — add overflow: hidden to the parent to clip them.
See also
- border — A border around the element: width, style and color in one property.
- overflow — What to do with content that does not fit into the element.
- box-shadow — A shadow around the element's box.
Related recipes
In the tutorial
- Backgrounds and borders — Background images, their repeat, size and position, border styles, rounded corners and outline.