In this section, we will learn what the border-top-right-radius property is and how to use it in CSS.

Click here to run the example of border-top-right-radius property.

CSS border-top-right-radius Property Definition and Usage

The `border-top-right-radius` property can be used to change the shape of the top right corner of elements.

Basically, by default this corner has a square shape but this property gives us the ability to change it and create other shapes like round, etc.

CSS border-top-right-radius Property Syntax

border-top-right-radius: length|% [length|%]|initial|inherit;

CSS border-top-right-radius Property Value

This property takes two values by default:

• The first value defines the top border radius.
• The second value defines the right border radius.

Notes:

• Any relative or absolute units that are supported in CSS can be used as the value of this property.
• If we only apply one value and omit the second one, browsers automatically copy the first value and use it for the second one as well.
• By default, both values are set to 0 and as a result, we will have a sharp corner for elements.

Example: border-top-right-radius property in CSS

See the Pen border-top-right-radius property in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.

How Does CSS border-top-right-radius Property Work?

In this example, the value for this property is set to 40px and 70px. This means the top border radius is set to 40px and right border radius to 70px.