PUBLISHED ON: APRIL 15, 2021
CSS border-top-right-radius property
The border-top-right-radius property in CSS refers to the rounding of the top-right corners of a specific element by giving a specific radius of the ellipse, which defines the curvature of the corner.
The round can be an ellipse or a circle or if the value is zero, then the corner remains square instead of round.
Syntax for border-top-right-radius property:
Following is the syntax for the border-top-right-radius property.
border-top-right-radius: length|% [length|%]|initial|inherit;
Example: CSS border-top-right-radius property
Here in the example below, we are using the border-top-right-radius property with different curving or rounding percentages, border styles, and their different values. In this case, we have given the border-top-right-radius as 1em 3em i.e; the top right corner of the container box gets curved to 1em horizontally and to 3em vertically.
<!DOCTYPE html>
<html>
<head>
<title>Border-top-right-radius property in CSS</title>
<style type="text/css">
.border-box {
border-top-right-radius: 1em 3em;
border-style: black 2px double;
background-color: pink;
background-clip: border-box;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div class="border-box">Study Tonight</div>
</body>
</html>
Output:
Example 2: CSS border-top-right-radius property
Here in the example below, we are using the border-top-right-radius property with different curving or rounding percentages, border styles, and their different values. In this case, we have given the border-top-right-radius as 40% i.e; the top right corner of the container box gets curved to 40%.
<!DOCTYPE html>
<html>
<head>
<title>Border-top-right-radius property in CSS</title>
<style type="text/css">
.border-box {
border-top-right-radius: 40%;
border-style: black 2px double;
background-color: skyblue;
background-clip: border-box;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div class="border-box">Study Tonight</div>
</body>
</html>
Output:
Browser Compatibility
There are many browsers that do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
4 |
4 |
| Edge |
12 |
12 |
| Firefox |
4 |
4 |
| Internet Explorer |
9 |
9 |
| Opera |
10.5 |
10.5 |
| Safari |
5 |
5 |
| Webview Android |
37 |
37 |
| Chrome Android |
18 |
18 |
| Firefox Android |
4 |
4 |
| Opera Android |
14 |
14 |
| IOS Safari |
4.2 |
4.2 |
| Samsung Internet |
1.0 |
1.0 |
Conclusion
The initial value for the border-top-right-radius property is zero. This property is applicable to all elements and also applicable to ::first-letter. It is not an inherited property. Percentages refer to the corresponding dimensions of the border-box. The computed value of this property is two absolute lengths or percentages. The animation type for this property is a length, a percentage.
