The border-top-right-radius property in CSS is used to define the radius of the right top corner of the border of a given element. The border-top-right-radius is used to draw a rounded corner at the top-right part of the container. The border-radius is used to set all radius corners of the container at once with the same value of the radius, border-top-right-radius specifically set the top-right border.
Syntax:
border-top-right-radius:length|[value%]|initial|inherit;
Default Value: It has a default value i.e 0.
Property Value: The border-top-right-radius property values are listed below:
- length: It is used to specify the radius of the right top corner in fixed length in px, em, etc. The default value is 0.
- percentage %: It is used to specify the radius of the right top corner of the border in percentage.
- initial: It is used to set the border-top-right-radius property to its default value.
- inherit: This property is inherited from its parent element.
Example: In this example, we are using the above-explained property.
html
<!DOCTYPE html><html>
<head>
<title>
border-top-right-radius property
</title>
<style>
#length {
border-color: green;
border-style: solid;
border-top-right-radius: 20px;
}
#percentage {
border-color: green;
border-style: solid;
border-top-right-radius: 59%;
}
#inherit {
border-color: green;
border-style: solid;
border-top-right-radius: inherit;
}
</style>
</head>
<body style="text-align:center">
<h1>GeeksforGeeks</h1>
<h3>border-top-right-radius property</h3>
<div id="length">
border-top-right-radius: length;
</div><br>
<div id="percentage">
border-top-right-radius: percentage;
</div><br>
<div id="inherit">
border-top-right-radius: inherit;
</div>
</body>
</html>
|
Output:
Supported Browsers: The browser supported by border-top-right-radius property are listed below:
- Google Chrome 4.0 and above
- Edge 12.0 and above
- Internet Explorer 9.0 and above
- Firefox 4.0 and above
- Safari 5.0 and above
- Opera 10.5 and above