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



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.


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;


<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