HTML - DOM Style Object borderBottomColor Property

Quiz

HTML DOM Style Object borderBottomColor Property sets or returns the color of bottom border of an element.

Syntax

Given below are the syntax to get or set the borderBottomColor property.

Set the borderBottomColor property:

object.style.borderBottomColor= "color | transparent | initial | inherit";

Get the borderBottomColor property:

object.style.borderBottomColor;

Property Values

Value	Description
color	It specifies the bottom border color of the element.
transparent	It sets the bottom border color to transparent which makes underlying content to be seen.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents bottom border color of an element.

Examples of HTML DOM Style Object 'borderBottomColor' Property

The following examples illustrates to set or get the color of bottom border.

Change the Color of Bottom Border

The following example illustrates to change the border color from black to green.

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Style Object borderBottomColor Property
    </title>
    <style>
        #border {
            border: aqua 2px solid;
        }
    </style>
</head>
<body>
    <p>
        Click to change the color of Bottom Border.
    </p>
    <button onclick="fun()">Change</button>
    <section id="border">
        Welcome to Tutorials Point...
    </section>
    <script>
        function fun() {
            document.getElementById("border")
            .style.borderBottomColor = "#04af2f";
        }
    </script>
</body>
</html>

Get the Color of Bottom Border

The following example returns the color of bottom border.

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Style Object borderBottomColor Property
    </title>
    <style>
        #border {
            border: aqua 2px solid;
        }
    </style>
</head>
<body>
    <p>
        Click to change the color of Bottom Border.
    </p>
    <button onclick="fun()">
        Change
    </button>
    <section id="border">
        Welcome to Tutorials Point...
    </section>
    <p id="bottom"></p>
    <script>
        function fun() {
            let x = document.getElementById("border")
                .style.borderBottomColor = "green";
            document.getElementById("bottom").innerHTML =x;
        }
    </script>
</body>
</html>

Supported Browsers

Property
borderBottomColor	Yes 1	Yes 12	Yes 1	Yes 1	Yes 3.5

html_dom.htm

Print Page