1. css
  2. /properties
  3. /border-bottom-left-radius

border-bottom-left-radius

Definition

The border-bottom-left-radius property is a CSS property that defines the radius of the bottom-left corner of an element. It is used to round the corners of the element's border.

The border-bottom-left-radius property can be set using a length value or a percentage value. A length value is a fixed size, while a percentage value is relative to the size of the element.

Examples

Length value

.element {
  border-bottom-left-radius: 10px;
}

Percentage value

.element {
  border-bottom-left-radius: 50%;
}

Global values

.element {
  border-bottom-left-radius: inherit;
  border-bottom-left-radius: initial;
  border-bottom-left-radius: unset;
}

Values

ValueDescription
<length>Specifies the radius of the border using a fixed size.
<percentage>Specifies the radius of the border using a percentage of the size of the element.
inheritThe element inherits the border-bottom-left-radius value from its parent element.
initialSets the border-bottom-left-radius to its default value.
unsetThe element's border-bottom-left-radius is set to the value specified in the user agent's style sheet, if any. If there is none, it will be the default value.

Best Practices

  • Use a reasonable radius value for the rounded corners to avoid creating corners that are too sharp or too rounded.
  • Avoid using too many different border radius values on a single page as it can be visually overwhelming.
  • Make sure the border radius matches the overall design and layout of your site.
  • Use the border-bottom-left-radius property in conjunction with the border-style and border-width properties to fully define the border of an element.
  • Consider the layout and hierarchy of your content when deciding which corners to round. For example, you may want to round the top corners of a header element but not the bottom corners.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes