HTML - DOM Style Object borderRightWidth Property

Quiz

HTML DOM Style Object borderRightWidth property sets or returns the right border width of the element.

Syntax

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

Set the borderRightWidth property:

object.style.borderRightWidth= "thin | medium | thick | length | initial | inherit";

Get the borderRightWidth property:

object.style.borderRightWidth;

Property Values

Value	Description
thin	It specifies a thin right border of element.
medium	It is default value which specifies a medium right border of element.
thick	It specifies a right thick border of element.
length	It specifies right border width in CSS measurement units like px.
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 of an element.

Examples of HTML DOM Style Object 'borderRightWidth' Property

The following examples gets and sets right border width.

Set the right Border Width of Element

The following examples illustrates diiferent right border width values like 'length', 'thin', 'medium' and 'thick'.

<!DOCTYPE html>
<html lang="en">
<head>
    <Title>
        HTML DOM Style Object borderRightWidth Property
    </Title>
    <style>
        h1 {
            border: solid 1px #04af2f;
        }
    </style>
</head>
<body>
    <p>Click to change the border style.</p>
    <button onclick="length()">Change Width</button>
    <button onclick="thin()">Thin</button>
    <button onclick="medium()">Medium</button>
    <button onclick="thick()">Thick</button>
    <h1 id="border">Welcome to Tutorials Point...</h1>
    <script>
        function length() {
            document.getElementById("border")
                .style.borderRightWidth = "10px";
        }
        function thin() {
            document.getElementById("border")
                .style.borderRightWidth = "thin";
        }
        function medium() {
            document.getElementById("border")
                .style.borderRightWidth = "medium";
        }
        function thick() {
            document.getElementById("border")
                .style.borderRightWidth = "thick";
        }
    </script>
</body>
</html>

Get right Border Width Value

The following example returns the value of right border width.

<!DOCTYPE html>
<html lang="en">
<head>
    <Title>
        HTML DOM Style Object borderRightWidth Property
    </Title>
    <style>
        h1 {
            border: solid 1px #04af2f;
        }
    </style>
</head>
<body>
    <p>Click to change the border style.</p>
    <button onclick="length()">Change Width</button>
    <button onclick="thin()">Thin</button>
    <button onclick="medium()">Medium</button>
    <button onclick="thick()">Thick</button>
    <h1 id="border">Welcome to Tutorials Point...</h1>
    <p id="right"></p>
    <script>
        function length() {
            let x = document.getElementById("border")
                .style.borderRightWidth = "10px";
            document.getElementById("right").innerHTML = x;
        }
        function thin() {
            let x = document.getElementById("border")
                .style.borderRightWidth = "thin";
            document.getElementById("right").innerHTML = x;
        }
        function medium() {
            let x = document.getElementById("border")
                .style.borderRightWidth = "medium";
            document.getElementById("right").innerHTML = x;
        }
        function thick() {
            let x = document.getElementById("border")
                .style.borderRightWidth = "thick";
            document.getElementById("right").innerHTML = x;
        }
    </script>
</body>
</html>

Supported Browsers

Property
borderRightWidth	Yes 1	Yes 12	Yes 1	Yes 1	Yes 3.5

html_dom.htm

Print Page