HTML | DOM Style borderBottomWidth Property

HTML DOM Style borderBottomRightRadius Property

HTML DOM Style animationDuration Property

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>w3wiki.!</h1>
    </div>
    <br>
 
    <input type="button" value="Click Me.!" onclick="Beginner()" />
 
    <script>
     function Beginner() {
        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>w3wiki.!</h1>
    </div>
    <br>
     
    <input type = "button" value = "Click Me.!" 
        onclick = "Beginner()" />
         
    <script>
    function Beginner() {
        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

Tags:

#HTML-DOM #HTML-Property #HTML #Web Technologies

HTML DOM Style borderBottomRightRadius Property

HTML DOM Style animationDuration Property

HTML | DOM Style borderBottomWidth Property

html

html

Contact Us