Open In App

HTML | DOM Style borderBottomWidth Property

Last Updated : 09 Aug, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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. 

html




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

html




<!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
  • Edge 12
  • Internet Explorer 4.0
  • Firefox 1.0
  • Opera 3.5
  • Safari 1.0


Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads