Open In App

HTML DOM Style borderRight Property

Improve
Improve
Like Article
Like
Save
Share
Report

The DOM style borderRight property is used to set or return the three different border-right properties such as border-right-width, border-right-style, and border-right-color of an element. 

Syntax:

  • It returns the borderRight Property.
object.style.borderRight
  • It is used to set the borderRight property.
object.style.borderRight = "width style color|initial|inherit"

Property value:

  • width: This will set the width of the right border.
  • style: This will set the style of the right border.
  • color: This will set the color of the right border.
  • initial: This will set the property to its default value.
  • inherit: This will inherit the property from its parent element

Return Value: This property returns a string that represents the width, style, and color of the right border of an element. 

Example 1: In this example, we will see the use of DOM Style borderRight Property.

html




<!DOCTYPE html>
<html>
<head>
    <title>DOM Style borderRight Property </title>
</head>
<body>
    <center>
        <h1 style="color:green;width:50%;" id="sudo">
            GeeksForGeeks
        </h1>
 
        <h2>DOM Style borderRight Property </h2>
        <br>
        <button type="button" onclick="geeks()">
            Submit
        </button>
        <script>
            function geeks() {
                document.getElementById("sudo").style.borderRight
                    = "thick solid green";
            }
        </script>
    </center>
</body>
</html>


Output: 

 

Example 2: In this example, we will see the use of DOM Style borderRight Property.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>DOM Style borderRight Property</title>
</head>
<body>
    <center>
        <h1 style="color:green;">
            GeeksForGeeks
        </h1>
        <h2>DOM Style borderRight Property </h2>
        <h3 style="border:2px solid red;width:50%;" id="sudo">
            geksforgeeks
        </h3>
        <br>
        <button type="button" onclick="geeks()">
            Submit
        </button>
        <script>
            function geeks() {
                document.getElementById("sudo").style.borderRight
                    = "thick dotted green";
            }
        </script>
    </center>
</body>
</html>


Output: 

 

  Supported Browsers: The browser supported by DOM borderRight property are listed below:

  • Google Chrome 1
  • Edge 12
  • Internet Explorer 5.5
  • Firefox 1
  • Opera 9.2
  • Apple Safari 1


Last Updated : 13 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads