CSS border-top-right-radius Property

CSS border-top-right-radius property specifies a radius for elementโ€™s top-right corner.

See the paragraph below, it has a 10px radius for its top-right corner.

This paragraph has a rounded top-right corner.

The radius value can be specified in any valid CSS length format such as โ€˜pxโ€™, โ€™emโ€™, โ€˜remโ€™, โ€˜cmโ€™, etc. But we mostly specify it in โ€˜pxโ€™.

Try out the below example to see how it works:

Example:

h1{
  border: 3px solid tomato;
  border-top-right-radius: 10px; 
}

CSS Syntax:

The border-top-right-radius property has the following syntax:

border-top-right-radius: radius| initial | inherit;

Property Values

The border-top-right-radius property accepts the following values:

radiusIt defines the shape of the top-right corner of the element. The default value is 0. It specifies the radius of the top-right corner in a valid CSS length format such as โ€˜pxโ€™, โ€™emโ€™, โ€˜remโ€™, โ€˜cmโ€™, etc.
initialSets the border-top-right-radius to its default value. Which is 0(zero).
inheritInherits the radius value from the parent element.

General Info

Default Value0(zero)
InheritedNo
JavaScript Usageelement.style.borderTopRightRadius = โ€œ10pxโ€

Related Pages

CSS Tutorial: CSS Borders