Related Articles

Related Articles

CSS border-bottom-left-radius Property
  • Last Updated : 07 Aug, 2019

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

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • Output:
    pixel

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



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

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • 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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • 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
  • Internet Explorer
  • Firefox
  • Opera
  • Safari



My Personal Notes arrow_drop_up
Recommended Articles
Page :