Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Style borderBottomLeftRadius Property

  • Last Updated : 04 Sep, 2019

The borderBottomLeftRadius property in HTML DOM is used to set or return the radius of the border of the bottom-left corner.

Syntax:

  • It returns the borderBottomLeftRadius Property.
    object.style.borderBottomLeftRadius
  • It is used to set the borderBottomLeftRadius property.
    object.style.borderBottomLeftRadius = "length|%|initial|inherit"

    Parameter:

    • Length: This will define the shape of the bottom-left corner bydefault value is 0.
    • %: This is also do the same job but in percentage format.
    • initial: This will set the property to it’s default value.
    • inherit: This will inherit the property from it’s parent element.

    Return Value: It returns the radius value of bottom left corner border.

    Example 1:






    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            div {
                border: 1px solid black;
                width: 300px;
                text-align:center;
                padding:30px;
                color: green;
            }
        </style>
    </head>
      
    <body>
      
        <div id = "main">
            <h1>GeeksforGeeks!</h1>
              
            <button onclick="myGeeks()">
                Click Here!
            </button>
        </div>
      
        <script>
            function myGeeks() {
                document.getElementById("main").style.borderBottomLeftRadius
                        = "35px";
            }
        </script>
      
    </body>
      
    </html>                    

    Output:
    Before click on the button:

    After click on the button:

    Example 2:




    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            div {
                border: 1px solid black;
                width: 300px;
                text-align:center;
                padding:30px;
                color: green;
            }
        </style>
    </head>
      
    <body>
      
        <div id = "main">
            <h1>GeeksforGeeks!</h1>
        </div><br>
            <button onclick="myGeeks()">
                Click Here!
            </button>
          
        <p id="val"></p>
      
        <script>
            function myGeeks() {
                document.getElementById("main").style.borderBottomLeftRadius
                        = "35px";
                var x = 
                document.getElementById("main").style.borderBottomLeftRadius;
                  
                document.getElementById("val").innerHTML 
                = "Border Radius: " + x;
            }
        </script>
      
    </body>
      
    </html>                    

    Output:
    Before click on the button:

    After click on the button:

    Supported Browsers: The browsers supported by borderBottomLeftRadius property are listed below:

    • Google Chrome 5.0, 4.0 -webkit-
    • Internet Explorer 9.0
    • Firefox 4.0, 3.0 -moz-
    • Opera 10.5
    • Safari 5.0, 3.1 -webkit-

    Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




    My Personal Notes arrow_drop_up
  • Recommended Articles
    Page :