CSS border-bottom-left-radius Property

The border-bottom-left-radius property is used to define the radius of the bottom left corner of the border i.e. it makes bottom-left of the border rounded.

Syntax:

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

Property Value:
Length: This property is used to specify the radius of border in length(eg. px).Its default value is 0.

Note: If we set two values for radius then the first value is assigned for the bottom border and the second value is assigned for the left border.

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

Examples:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS border-bottom-left-radius Property 
    </title> 
    <style> 
        #bdr { 
            border: 2px solid black; 
            padding: 10px; 
            color: #009900; 
            font-size: 40px; 
            border-bottom-left-radius: 25px; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h2>border-bottom-left-radius: 25px:</h2> 
        <div id="bdr"> 
            <p>GeeksforGeeks</p> 
        </div> 
    </center> 
</body> 
  
</html> 

Output:

(Percentage)%:It defines radius of bottom-left corner of border in percentage.

Syntax:

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

Examples:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS border-bottom-left-radius Property 
    </title> 
    <style> 
        #bdr { 
            border: 2px solid black; 
            padding: 50px; 
            color: #009900; 
            font-size: 40px; 
            border-bottom-left-radius: 50%; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h2>border-bottom-left-radius: 50%:</h2> 
        <div id="bdr"> 
            <p>GeeksforGeeks</p> 
        </div> 
    </center> 
</body> 
  
</html> 

Output:

Initial: Initial sets the default property of the bottom-left-radius i.e. 0 which results in square border.

Syntax:
```
border-bottom-left-radius: initial;
```

Examples:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS border-bottom-left-radius Property 
    </title> 
    <style> 
        #bdr { 
            border: 2px solid black; 
            padding: 50px; 
            color: #009900; 
            font-size: 40px; 
            border-bottom-left-radius: initial; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h2>border-bottom-left-radius: initial</h2> 
        <div id="bdr"> 
            <p>GeeksforGeeks</p> 
        </div> 
    </center> 
</body> 
  
</html> 

Output:

Inherit: By using inherit property, it inherit the properties of parent element and use it for the current bottom-left-radius of border.

Syntax:
```
border-bottom-left-radius: inherit;
```

Supported Browsers: The browser supported by CSS border-bottom-left-radius Property are listed below:

Google Chrome
Internet Explorer
Firefox
Opera
Safari

My Personal Notes

Recommended Posts: