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 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 >w3wiki</ 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
Contact Us