HTML DOM Style borderBottom Property

The DOM style borderBottom property is used to set or return the three different border-bottom properties such as border-bottom-width, border-bottom-style, and border-bottom-color of an element.

Syntax:

It returns the borderBottom Property.

object.style.borderBottom

It is used to set the borderBottom property.

object.style.borderBottom = "width style color|initial|inherit"

Parameter:

width: It holds the width of the bottom border.
style: It sets the bottom border style.
Color: Sets the color of the bottom border.
Initial: Sets the property as its default.
inherit: Inherit the property from its parent.

Return Value: It returns a string value that represents the width, style, and/or color of the bottom border of an element.

Example: In this example, we are using borderBottom property.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>DOM Style borderBottom Property </title>
</head>

<body>
    <center>
        <h1 style="color:green;width:50%;" id="sudo">
            GeeksForGeeks
        </h1>
        <h2>DOM Style borderBottom Property </h2>
        <br>
        <button type="button" onclick="geeks()">
            Submit
        </button>
        <script>
            function geeks() {
                document.getElementById("sudo").style.borderBottom
                    = "thick solid green";
            }
        </script>
    </center>
</body>
</html>

Output:

Example 2: In this example, we are using borderBottom property.

html

<!DOCTYPE html>
<html>
<head>
    <title>DOM Style borderBottom Property</title>
</head>
<body>
    <center>
        <h1 style="color:green;">
            GeeksForGeeks
        </h1>
        <h2>DOM Style borderBottom Property </h2>

        <h3 style="border:2px solid red;
                   width:50%;" id="sudo">
              geeksforgeeks
          </h3>
        <br>
        <button type="button" onclick="geeks()">
            Submit
        </button>

        <script>
            function geeks() {
                document.getElementById("sudo").style.borderBottom
                    = "thick dotted green";
            }
        </script>
    </center>
</body>
</html>

Output:

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

Google Chrome 1.0 and above
Edge 12.0 and above
Internet Explorer 4.0 and above
Firefox 1.0 and above
Opera 3.5 and above
Safari 1.0 and above

HTML DOM Style borderBottom Property

Explore