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