CSS border-bottom-right-radius Property
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 border-bottom-right-radius property to its default value.
- inherit: This property is inherited from its parent element.
Example:
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:
Supported Browsers: The browser supported by border-bottom-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
Please Login to comment...