HTML - DOM Style Object borderLeftColor Property

Quiz

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

Syntax

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

Set the borderLeftColor property:

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

Get the borderLeftColor property:

object.style.borderLeftColor;

Property Values

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

Examples of HTML DOM Style Object 'borderLeftColor' Property

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

Change the Color of left Border

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

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

Get the Color of left Border

The following example returns the color of left border.

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

Supported Browsers

Property
borderLeftColor	Yes 1	Yes 12	Yes 1	Yes 1	Yes 3.5

html_dom.htm

Print Page