CSS border-bottom-left-radius Property

CSS border-bottom-left-radius

The border-bottom-left-radius property in CSS defines the rounded corner radius for the bottom-left corner of an element. This property allows for creating smooth, curved corners by specifying a length or percentage value.

Syntax of border-bottom-left-radius

</>

Copy

border-bottom-left-radius: length | % [length | %] | initial | inherit;

Values

Value	Description
`length`	Defines the horizontal radius in any valid CSS length unit (e.g., `px`, `em`, `rem`, etc.).
`%`	Defines the radius as a percentage of the element’s dimensions.
`[length \| %]`	Defines both the horizontal and vertical radii. The first value sets the horizontal radius, and the second value sets the vertical radius.
`initial`	Sets the property to its default value (`0`).
`inherit`	Inherits the value from its parent element.

Default Value

0 (no rounding)

Examples for border-bottom-left-radius

Using the CSS border-bottom-left-radius Property

The following examples demonstrate how to use the border-bottom-left-radius property to set rounded corners on the bottom-left side of an element.

</>

Copy

/* Set the bottom-left corner radius to 20px */
.element {
  border-bottom-left-radius: 20px;
}

/* Set the bottom-left corner radius to 50% */
.element {
  border-bottom-left-radius: 50%;
}

/* Set the horizontal and vertical radii */
.element {
  border-bottom-left-radius: 20px 10px;
}

/* Inherit the corner radius from the parent element */
.element {
  border-bottom-left-radius: inherit;
}

Example for a Rounded Bottom-Left Corner

Below is an example demonstrating how to create a rounded bottom-left corner using border-bottom-left-radius: 50px:

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: red;
    border-bottom-left-radius: 50px;
  }
</style>
</head>
<body>

<div class="box"></div>

</body>
</html>

Example for a Rounded Bottom-Left Corner with Percentage Value

border-bottom-left-radius: 80%;

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: red;
    border-bottom-left-radius: 80%;
  }
</style>
</head>
<body>

<div class="box"></div>

</body>
</html>

Example for a Rounded Bottom-Left Corner with Different Values for Horizontal and Vertical radii

border-bottom-left-radius: 20% 40%;

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: red;
    border-bottom-left-radius: 20% 40%;
  }
</style>
</head>
<body>

<div class="box"></div>

</body>
</html>

Browser Support

The border-bottom-left-radius property is supported in modern browsers. Below is a compatibility table:

Browser	Version
Chrome	5.0
Edge	9.0
Firefox	4.0
Safari	5.0
Opera	10.5

TutorialKart

CSS border-bottom-left-radius Property