Skip to content
Related Articles

Related Articles

HTML | DOM Style borderBottomLeftRadius Property

View Discussion
Improve Article
Save Article
  • Last Updated : 09 Aug, 2022
View Discussion
Improve Article
Save Article

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: 

html




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

html




<!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 4.0
  • Edge 12.0
  • Internet Explorer 9.0
  • Firefox 4.0
  • Opera 10.5
  • Safari 5.0

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!