HTML - DOM Style Object borderTopColor Property

Quiz

HTML DOM Style Object borderTopColor Property sets or returns the color of top border of an element.

Syntax

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

Get the borderTopColor property:

object.style.borderTopColor;

Property Values

Value	Description
color	It specifies the top border color of the element.
transparent	It sets the top 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 top border color of an element.

Examples of HTML DOM Style Object 'borderTopColor' Property

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

Change the Color of Top Border

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

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

Get the Color of Top Border

The following example returns the color of top border.

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

Supported Browsers

Property
borderTopColor	Yes 1	Yes 12	Yes 1	Yes 1	Yes 3.5

html_dom.htm

Print Page