CSS | border-top-right-radius Property
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 top-right part of the container. The border-radius is used to set all radius corner of container at once with same value of 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 border-top-right-radius property to its default value.
- inherit: This property is inherited from its parent element.
Example:
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
Please Login to comment...