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.

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.


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.


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.


In this CSS Tutorial, we learned about border-top-right-radius property, and how to use this property for HTML Elements, with examples.