CSS border-bottom-left-radius (Set/Change Radius of Bottom Left Border)

The CSS border-bottom-left-radius property is used when we need to define the radius of left bottom border. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p {padding: 14px; border: 4px solid chocolate; border-bottom-left-radius: 25px;}
   </style>
</head>
<body>

   <p>This is a para.</p>

</body>
</html>

Output

This is a para.

CSS border-bottom-left-radius Syntax

The syntax of border-bottom-left-radius in CSS, is:

border-bottom-left-radius: value;

The value should be any of the following four:

length - used to define the shape based on the length
% - used to define the shape based on percentage
initial - used to set the default
inherit - used to inherit the value from its parent

Note - To define the bottom and left border separately to shape the required border, provide two values. The first value refers to the bottom, whereas the second value refers to the left border. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p.one {padding: 24px; border: 4px solid coral; border-bottom-left-radius: 60px 30px;}
      p.two {padding: 24px; border: 4px solid coral; border-bottom-left-radius: 30px 60px;}
   </style>
</head>
<body>

   <p class="one">This is para one.</p>
   <p class="two">This is para two.</p>

</body>
</html>

Output

This is para one.

This is para two.

CSS Online Test

« Previous Tutorial Next Tutorial »