Categories
CSS Web development

CSS border-bottom-left-radius Property

CSS border-bottom-left-radius Property

The CSS border-bottom-left-radius property specifies the radius of the bottom-left corner.

CSS border-bottom-left-radius Property

Demo:

Click the button to change the border-bottom-left-radius property (50px) of the DIV element:



Hello


Syntax:

border-bottom-left-radius: length;

length – specifies the shape of the bottom-left corner (px/%).

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
  border: 3px solid #2a9d8f;
  padding: 10px;
  border-bottom-left-radius: 25px;
}

#example2 {
  border: 3px solid #2a9d8f;
  padding: 10px;
  border-bottom-left-radius: 50px 20px;
}
    
#example3 {
  border: 3px solid #2a9d8f;
  padding: 10px;
  border-bottom-left-radius: 50%;
}
</style>
</head>
<body>

<h4>border-bottom-left-radius: 25px;</h4>
<div id="example1">
  <p>The border-bottom-left-radius property defines the radius of the bottom-left corner.</p>
</div>

<h4>border-bottom-left-radius: 50px 20px;</h4>
<div id="example2">
  <p>If two values are set; the first one is for the bottom border, the second one for the left border.</p>
</div>
    
<h4>border-bottom-left-radius: 50%;</h4>
<div id="example3">
  <p>The CSS border-bottom-left-radius property is set to 50%.</p>
</div>

</body>
</html>

Output:

border-bottom-left-radius: 25px;

The border-bottom-left-radius property defines the radius of the bottom-left corner.

border-bottom-left-radius: 50px 20px;

If two values are set; the first one is for the bottom border, the second one for the left border.

border-bottom-left-radius: 50%;

The CSS border-bottom-left-radius property is set to 50%.


Enjoy coding!

Read also:

CSS border-radius property

Advanced CSS Border-radius/ Drop Shape, Lemon Shape, Leaf Shape & Egg Shape