CSS border-bottom-right-radius Property

CSS border-bottom-right-radius property specifies a radius for element’s bottom-right corner.

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

This paragraph has a rounded bottom-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 pixels.

Example:

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

CSS Syntax:

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

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

Property Values

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

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

General Info

Default Value0(zero)
InheritedNo
JavaScript Usageelement.style.borderBottomRightRadius = “10px”

Related Pages

CSS Tutorial: CSS Borders