CSS border-bottom-left-radius Property

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

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

This paragraph has a rounded bottom-left corner.

The radius value can be specified in any valid CSS length fomat such as ‘px’, ’em’, ‘rem’, ‘cm’, etc. But, we mostly specify it in pixels. Try out the example below to see how it works:

Example:

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

CSS Syntax:

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

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

Property Values

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

radiusIt defines the shape of the element’s bottom-left corner. The default value is 0. It can accept any value in formats like ‘px’, ’em’, ‘rem’, etc.
initialSets the border-bottom-left-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.borderBottomLeftRadius = “10px”

Related Pages

CSS Tutorial: CSS Borders