Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Style borderBottomWidth Property

  • Last Updated : 30 Jul, 2019

The style borderBottomWidth property in HTML DOM is used to set or return the width of bottom border of an element.

Syntax:

  • It is used to return the width of bottom border.
    object.style.borderBottomWidth
  • It is used to set the width of the bottom border.
    border-bottom-width: "medium|thin|thick|length|initial|inherit";

Return Value: It returns bottom border width of selected element.

Property Values:

  • medium: It sets the medium size bottom border. It is the default value.
  • thin: It sets the thin border of the bottom.
  • thick: It sets the thick bottom border.
  • length: It sets the width of the border. It does not takes negative value.
  • initial: It sets the borderBottomWidth property to its default value.
  • inherit: This is used to inherits from its parent element.

Example 1: This example use thick value of borderBottomWidth property.






<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML | DOM Style borderBottomWidth Property
    </title>
    <style>
        div {
            color: green;
            border: 1px solid green;
            text-align: center;
        }
    </style>
</head>
  
<body>
    <div id="main">
        <h1>GeeksforGeeks.!</h1>
    </div>
    <br>
  
    <input type="button" value="Click Me.!" onclick="geeks()" />
  
    <script>
     function geeks() {
        document.getElementById("main").style.borderBottomWidth 
                                                     = "thick";
        }
    </script>
</body>
  
</html>

Output:
Before click on the button:

After click on the button:

Example 2: This example use thin value of borderBottomWidth Property.




<!DOCTYPE html>
<html>
<head>
    <title>
        HTML | DOM Style borderBottomWidth Property
    </title>
    <style>
        div {
            color: green;
            border: 8px solid green;
            text-align: center;
        }
    </style>
</head>
  
<body>
    <div id = "main">
        <h1>GeeksforGeeks.!</h1>
    </div>
    <br>
      
    <input type = "button" value = "Click Me.!" 
        onclick = "geeks()" />
          
    <script>
    function geeks() {
        document.getElementById("main").style.borderBottomWidth
                    = "thin";
    }
    </script>
</body>
</html>                    

Output:
Before click on the button:

After click on the button:

Supported Browsers: The browser supported by Style borderBottomWidth property are listed below:

  • Google Chrome 1.0
  • Internet Explorer 4.0
  • Firefox 1.0
  • Opera 3.5
  • Safari 1.0

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 :