HTML - DOM Style Object borderColor Property

Quiz

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

It can take from one to four values which can be implemented as follows:

One Value:For one value, all four borders will be of same colour. For example: h1 {border-color: yellow}
Two Value:For two value, top and bottom border will be of same colour, left and right border will be of same colour. For example: h1 {border-color: yellow green}
Three Value:For three value, top and bottom border will be of different colour whereas left and right border will be of same colour. For example: h1 {border-color: yellow green aqua}
Four Value:For four value, all borders will have different color. For example h1 {border-color: yellow green aqua blue}

Syntax

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

Set the borderColor property:

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

Get the borderColor property:

object.style.borderColor;

Property Values

Value	Description
color	It specifies the border color of the element. By default border colour is black.
transparent	It sets the 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 border color of an element.

Examples of HTML DOM Style Object 'borderColor' Property

The following examples illustrates to change the border color and set multiple values for each side of the border.

Change Border Color

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

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

Set Multiple Border Colors

The following example illustrates how to set different border colors for different sides of the border.

<!DOCTYPE html>
<html lang="en">
    <head>
        <Title>
            HTML DOM Style Object borderColor Property
        </Title>
        <style>
            h1 {
                border : 2px solid black;
            }
        </style>
    </head>
    <body>
        <p>
            Click to change the border color.
        </p>
        <button onclick="funtwo()">
            Two Color
        </button>
        <button onclick="funthree()">
            Three Color
        </button>
        <button onclick="funfour()">
            Four Color
        </button>
        <h1 id="border">
            Welcome to Tutorials Point...
        </h1>
        <script>
            function funtwo() {
                document.getElementById("border")
                .style.borderColor = "#04af2f blue";
            }
            function funthree() {
                document.getElementById("border")
                .style.borderColor = "#04af2f blue yellow";
            }
            function funfour() {
                document.getElementById("border")
                .style.borderColor = "#04af2f blue yellow red";
            }
        </script>
    </body>
</html>

Supported Browsers

Property
borderColor	Yes 1	Yes 12	Yes 1	Yes 1	Yes 3.5

html_dom.htm

Print Page