CSS - border-bottom-left-radius Property

Quiz

CSS border-bottom-left-radius property controls the roundness of the bottom-left corner of an element's border.

Syntax

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

Property Values

Value	Description
length	It defines the size of the bottom left corner radius in length values. Default is 0.
percentage	It defines the size of the bottom left corner radius in percentage values.
initial	This sets the property to its default value.
inherit	This inherits the property from the parent element.

Examples of CSS Border Bottom Left Radius Property

The following examples explain the border-bottom-left-radius property with different values.

Border Bottom Left Radius with Length Value

To set the roundness of the left border bottom, we can specify the radius using length value. In the following example, 80px radius has been used with the border-bottom-left-radius property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .rounded-border {
         border: 3px solid black;
         border-bottom-left-radius: 80px;
         width: 200px;
         height: 200px;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-bottom-left-radius property
   </h2>
   <div class="rounded-border">
      This shows the border-bottom-left-radius property 
      with 80px radius.
   </div>
</body>

</html>

Border Bottom Left Radius with Percentage Value

To set the roundness of the left border bottom, we can specify the radius using percentage value. In the following example, 30% radius has been used with the border-bottom-left-radius property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .rounded-border {
         border: 3px solid black;
         border-bottom-left-radius: 30%;
         width: 200px;
         height: 200px;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-bottom-left-radius property
   </h2>
   <div class="rounded-border">
      This shows the border-bottom-left-radius property 
      with 30% radius.
   </div>
</body>

</html>

Border Bottom Left Radius with Two Values

To set the roundness of the bottom-left border, we can use either one or two values. A single value affects the radius uniformly, while two values set horizontal and vertical radii separately. The following example shows the difference.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .single-value {
         border: 3px solid black;
         border-bottom-left-radius: 60px;
         width: 200px;
         height: 200px;
      }

      .double-value {
         border: 3px solid black;
         border-bottom-left-radius: 60px 10px;
         width: 200px;
         height: 200px;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-bottom-left-radius property
   </h2>
   <p class="single-value">
      This shows the border-bottom-left-radius property 
      with single value.
   </p>
   <p class="double-value">
      This shows the border-bottom-left-radius property 
      with two values.
   </p>
</body>

</html>

Supported Browsers

Property
border-bottom-left-radius	5.0	9.0	4.0	5.0	10.5

css_reference.htm

Print Page