HTML - DOM Style Object borderRight Property



HTML DOM Style Object borderRight property sets or returns the right border properties of an element. It is a shorthand notation for border-right-width, border-right-style and border-right-color.

Syntax

Set the borderRight property:
object.style.borderRight= "width | style | color | initial | inherit";
Get the borderRight property:
object.style.borderRight;

Property Values

Value Description
width It sets the right border width.
style It sets the right border style.
color It sets the right border color.
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 width, style and color property of an element.

Example of HTML DOM Style Object 'borderRight' Property

The following example sets a right border to a section element.

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Style Object borderRight Property
    </title>
    <style>
        section {
            border : solid 1px;
        }
    </style>
</head>
<body>
    <button onclick="fun()">
        Add right Border
    </button>
    <section id="border">
        Welcome to Tutorials Point...
    </section>
    <script>
        function fun() {
            document.getElementById("border")
                .style.borderRight = "4px solid #04af2f";
        }
    </script>
</body>
</html>

Supported Browsers

Property Chrome Edge Firefox Safari Opera
borderRight Yes 1 Yes 12 Yes 1 Yes 1 Yes 3.5
html_dom.htm
Advertisements