HTML DOM Style borderBottom Property

Last Updated : 12 Jun, 2023

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>