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
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> #div1 { border: 5px solid; border-top-right-radius: 50px; width: 100px; height: 100px; background: lightcoral; } </style> </head> <body> <div id="div1"></div> </body> </html>
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
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> div { border: 5px solid; height: 100px; display: inline-block; margin: 10px; } #div1 { border-top-right-radius: 50%; width: 100px; background: #d2ff8a; } #div2 { border-top-right-radius: 50%; width: 200px; background: #ff6347; } </style> </head> <body> <div id="div1"></div> <div id="div2"></div> </body> </html>
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.