A border-bottom-right-radius sets the bottom right corner radius.
This property gives an element a rounded border effect.
An element with a border-bottom-right-radius.
<style>
.border-rounded {
border: 3px solid #302ea3;
padding: 30px;
border-bottom-right-radius: 50px;
}
</style>
<div class="border-rounded">
50px radius on bottom right corner
</div>
border-bottom-right-radius: length | length% | initial | inherit;
| Value | Description |
|---|---|
| length | Shape of the bottom right corner, the default value is 0. |
| % | Shape of the bottom right 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-bottom-radius values.
<style>
.border-rounded-percentage {
padding: 30px;
border: 3px solid #302ea3;
border-bottom-right-radius: 50%;
}
</style>
<div class="border-rounded-percentage">
50% radius on bottom right corner
</div>
This table shows when border-bottom-right-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 | Mar 2010 |
 Safari
|
5.0 | Jun 2010 |
