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