HTML - DOM Style Object borderRightColor Property

Quiz

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

Syntax

Set the borderRightColor property:

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

Get the borderRightColor property:

object.style.borderRightColor;

Property Values

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

Examples of HTML DOM Style Object 'borderRightColor' Property

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

Change the Color of Right Border

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

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Style Object borderRightColor Property
    </title>
    <style>
        #border {
            border: aqua 2px solid;
        }
    </style>
</head>
<body>
    <p>
        Click to change the color of right 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.borderRightColor = "#04af2f";
        }
        function funtwo() {
            document.getElementById("border")
                .style.borderRightColor = "transparent";
        }
    </script>
</body>
</html>

Get the Color of Right Border

The following example returns the color of right border.

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

Supported Browsers

Property
borderRightColor	Yes 1	Yes 12	Yes 1	Yes 1	Yes 3.5

html_dom.htm

Print Page