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 the bottom-left of the border rounded.

Syntax:

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

Default Value: its default value is 0.

Property Value:

Length: This property is used to specify the radius of the border in length(eg. px). Its default value is 0.
Inherit: By using inherit property, it inherits the properties of the parent element and uses it for the current bottom-left-radius of the border.
(Percentage)%: It defines the radius of the bottom-left corner of the border in percentage.
Initial: Initial sets the default property of the bottom-left-radius i.e. 0 which results in a square border.
Note: If we set two values for radius then the first value is assigned to the bottom border and the second value is assigned to the left border.

Examples: In this example, we are using the border-bottom-left-radius: 20px 50px; property.

HTML

<!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:

pixel

Examples: In this example, we are using the border-bottom-left-radius: % [length|%]; property.

HTML

<!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:

percentage

Examples: In this example, we are using the border-bottom-left-radius: initial; property.

HTML

<!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:

initial

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

Google Chrome 4 and above
Edge 12 and above
Internet Explorer 9 and above
Firefox 4 and above
Opera 10.5 and above
Safari 5 and above

CSS border-bottom-left-radius Property

Explore