CSS border-top-right-radius Property
CSS border-top-right-radius property is used to set the radius for top-right corner of the HTML Element(s).
border-top-right-radius property can be used to create a rounded corner to the HTML element.
border-top-right-radius can be set with the following values.
- CSS length [Refer CSS Length Units]
- Percentage
- initial
- inherit
Note: border has to be set for the HTML Element(s) to let border-top-right-radius make the effect on the HTML element(s).
border-top-right-radius in Length Units
In the following example, we set border-top-right-radius with 20px.
Example
border-top-right-radius in Percentage
In the following example, we take two div elements. We set border-top-right-radius with 50% for both the divs.
Using second div, we demonstrate how percentage values work for border-top-right-radius when length and width are different. The specified percentage of the width and length are considered for the corner radius.
Example
border-top-right-radius: initial or inherit
initial sets the border-top-right-radius with its default value of 0.
inherit sets the border-top-right-radius with that of its parent.
Conclusion
In this CSS Tutorial, we learned about border-top-right-radius property, and how to use this property for HTML Elements, with examples.