Skip to content
Related Articles

Related Articles

CSS border-bottom-left-radius Property

View Discussion
Improve Article
Save Article
  • Last Updated : 16 Jun, 2022

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;

Default Value : its default value is 0. 

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: 
     

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

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

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

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

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: 
     

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

  •  

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

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!