A border-radius adds rounded corners to an element.
The border-radius can have one to four values, one for each corner.
An element with a border-radius.
<style>
.border-round {
padding: 25px;
border: 2px solid #302ea3;
border-radius: 50px;
}
</style>
<div class="border-round">
An element with a 50px border radius.
</div>
border-radius:1-4 length|% / 1-4 length|%| initial | inherit;
| Value | Description |
|---|---|
| length | Shape of the corner, default value is 0. |
| % | Shape of the corner in percentage |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see the different border-radius values.
<style>
.border-radius-example {
padding: 20px;
border: 2px solid #302ea3;
border-radius: 15%;
}
</style>
<div class="border-radius-example">
border-radius: 15%
</div>
This example has a different border radius for each of the four corners.
<style>
.border-radius-4 {
padding: 20px;
border: 2px solid #302ea3;
border-radius: 5px 10px 30px 50px;
}
</style>
<div class="border-radius-4">
Each corner has its own border-radius value.
</div>
A border radius with 3 values. The middle value is used for top-right and bottom-left corners.
<style>
.border-radius-3 {
padding: 20px;
border: 2px solid #302ea3;
border-radius: 5px 10px 50px;
}
</style>
<div class="border-radius-3">
Three border-radius values.
</div>
Border radius with two values.
<style>
.border-radius-2 {
padding: 20px;
border: 2px solid #302ea3;
border-radius: 2px 30px;
}
</style>
<div class="border-radius-2">
Two border-radius values
</div>
An image with rounded corners.
<div>
<img style="border-radius: 30px;"
src="/img/css/cardplayers.jpg" />
</div>
An image as an elliptical shape.
<div>
<img style="border-radius: 50%;"
src="/img/css/cardplayers.jpg" />
</div>
This table shows when border-radius support started for each browser.
 Chrome
|
5.0 | May 2010 |
 Firefox
|
4.0 | Mar 2011 |
 IE/Edge
|
9.0 | Mar 2011 |
 Opera
|
10.5 | Jun 2010 |
 Safari
|
5.0 | Jun 2010 |
