Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Style borderRightWidth Property

  • Difficulty Level : Basic
  • Last Updated : 30 Jul, 2019

The borderRightWidth property in HTML DOM is used to set or return the width of the right border of an element.

Syntax:

  • It returns the borderRightWidth property.
    object.style.borderRightWidth
  • It is used to set the borderRightWidth property.
    object.style.borderRightWidth = "thin|medium|thick|length|
    initial|inherit"

Property Values:

  • thin: It is used to define a thin border.
  • medium: It is used to define a medium border and it is default value.
  • thick: It is used to define a thick border.
  • length: The width of the border in length unit.
  • initial: It is used to set to its default value.
  • inherit: It is used to inherit from its parent element.

Example 1: This example uses style borderRightWidth property to set the width of right border to 20px.




<!DOCTYPE html>
<html>
<head
    <title>
        Style borderRightWidth Property
    </title>
</head
  
<body style="text-align:center;">
  
    <div id="GFG" style="border:solid green;">
          
        <h1>GeeksForGeeks</h1>
          
        <h2>
            Style borderRightWidth Property
        </h2>
          
        <button type="button" onclick="myFunction()">
            Click
        </button>
          
        <br><br>
    </div>
      
    <!-- Script to set border right width -->
    <script>
        function myFunction() {
            document.getElementById("GFG").style.borderRightWidth
                    = "20px";
        }
    </script>
</body>
  
</html>

Output:
Before clicking on the button:

After clicking on the button:



Example 2: This example uses style borderRightWidth property to set the width of right border to ‘thin’.




<!DOCTYPE html>
<html>
  
<head
    <title>
        Style borderRightWidth Property
    </title>
</head
  
<body style="text-align:center;">
   
    <div id="GFG" style = "border:20px solid green">
        <h1>
            GeeksForGeeks
        </h1>
        <h2>
            Style borderRightWidth Property
        </h2>
          
        <button type="button" onclick="myFunction()">
            Click
        </button>
          
        <br><br>
    </div>
      
    <!-- Script to set border right width to thin -->
    <script>
        function myFunction() {
            document.getElementById("GFG").style.borderRightWidth
                    = "thin";
        }
    </script>
</body>
  
</html>

Output:
Before clicking on the button:

After clicking on the button:

Supported Browser: The browser supported by DOM Style borderRightWidth Property are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :