The border-bottom-right-radius property in CSS is used to define the radius of the right bottom corner of the border of a given element. It is used to round the corner on the right side of the bottom border.
Syntax:
border-bottom-right-radius:length|[value%]|initial|inherit;
Property Value: The border-bottom-right-radius property values are listed below:
- length: It is used to specify the radius of the right bottom corner in fixed length in px, em etc. The default value is 0.
- percentage %: It is used to specify the radius of the right bottom corner of the border in percentage.
- initial: It is used to set the border-bottom-right-radius property to its default value.
- inherit: This property is inherited from its parent element.
Example: In this example we are using above-explained property.
HTML
<!DOCTYPE html><html>
<head>
<title>
border-bottom-right-radius property
</title>
<style>
#length {
border-color: green;
border-style: solid;
border-bottom-right-radius: 20px;
}
#percentage {
border-color: green;
border-style: solid;
border-bottom-right-radius: 59%;
}
#inherit {
border-color: green;
border-style: solid;
border-bottom-right-radius: inherit;
}
</style>
</head>
<body style="text-align:center">
<h1>GeeksforGeeks</h1>
<h3>border-bottom-right-radius property</h3>
<div id="length">
border-bottom-right-radius: length;
</div><br>
<div id="percentage">
border-bottom-right-radius: percentage;
</div><br>
<div id="inherit">
border-bottom-right-radius: inherit;
</div>
</body>
</html>
|
Output:
- 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
Article Tags :
Recommended Articles