Skip to content
Related Articles

Related Articles

HTML | DOM Style borderRightStyle Property

View Discussion
Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 09 Aug, 2022

The Style borderRightStyle property in HTML DOM is used to set or return the style of right border of an element. 

Syntax:

  • It returns the borderRightStyle property.
object.style.borderRightStyle
  • It is used to set borderRightStyle property.
object.style.borderRightStyle="none|hidden|dotted|dashed|solid|
double|groove|ridge|inset|outset|initial|inherit"

Return Values: A String, representing the style of an element’s right border.

Property Values:

ValueEffect
noneNo border is created. It is the default value.
hiddenIt is same as ‘none’ property, except it helps during border conflict resolution in table elements.
dottedIt uses dotted lines as border.
dashedA dashed line is used as the border.
solidA single solid line is used as the border.
doubleTwo lines are used as the border.
grooveA 3D grooved border is displayed. The effect depends on border-color value.
ridgeA 3D ridged border is displayed. The effect depends on border-color value.
insetA 3D inset border is displayed. The effect depends on border-color value.
outsetA 3D outset border is displayed. The effect depends on border-color value.
initialIt sets the property to its default value.
inheritIt sets the property to from its parent element.

All the property value examples are available below: 

Example 1: This example uses none property value. 

html




<!DOCTYPE html>
<html>
     
<head>
    <title>
        DOM Style borderRightStyle Property
    </title>
     
    <style>
        .item {
            padding: 10px;
            border: 15px solid green;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>DOM Style borderRightStyle Property</b>
     
    <p class="item">
        GeeksforGeeks is a computer science
        portal with a huge variety of well
        written and explained computer science
        and programming articles, quizzes and
        interview questions.
    </p>
     
    <button onclick="changeBorderStyle()">
        Change style
    </button>
     
    <!-- Script to uses DOM Style borderRightStyle
        Property -->
    <script>
        function changeBorderStyle() {
            elem = document.querySelector('.item');
 
            // Set the border style
            elem.style.borderRightStyle = 'none';
        }
    </script>
</body>
 
</html>                   

Output: 

Before clicking the button:

 none-before 

After clicking the button:

 none-after 

Example 2: This example uses hidden property value. 

html




<!DOCTYPE html>
<html>
     
<head>
    <title>
        DOM Style borderRightStyle Property
    </title>
     
    <style>
        .item {
            padding: 10px;
            border: 15px solid green;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>DOM Style borderRightStyle Property</b>
     
    <p class="item">
        GeeksforGeeks is a computer science
        portal with a huge variety of well
        written and explained computer science
        and programming articles, quizzes and
        interview questions.
    </p>
     
    <button onclick="changeBorderStyle()">
        Change style
    </button>
     
    <!-- Script to uses DOM Style borderRightStyle
        Property -->
    <script>
        function changeBorderStyle() {
            elem = document.querySelector('.item');
 
            // Set the border style
            elem.style.borderRightStyle = 'hidden';
        }
    </script>
</body>
 
</html>                   

Output: 

Before clicking the button:

 hidden-before 

After clicking the button:

 hidden-after 

Example 3: This example uses dotted property value. 

html




<!DOCTYPE html>
<html>
     
<head>
    <title>
        DOM Style borderRightStyle Property
    </title>
     
    <style>
        .item {
            padding: 10px;
            border: 15px solid green;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>DOM Style borderRightStyle Property</b>
     
    <p class="item">
        GeeksforGeeks is a computer science
        portal with a huge variety of well
        written and explained computer science
        and programming articles, quizzes and
        interview questions.
    </p>
     
    <button onclick="changeBorderStyle()">
        Change style
    </button>
     
    <!-- Script to uses DOM Style borderRightStyle
        Property -->
    <script>
        function changeBorderStyle() {
            elem = document.querySelector('.item');
 
            // Set the border style
            elem.style.borderRightStyle = 'dotted';
        }
    </script>
</body>
 
</html>                   

Output: 

Before clicking the button:

 dotted-before 

After clicking the button: 

dotted-after 

Example 4: This example uses dashed property value. 

html




<!DOCTYPE html>
<html>
     
<head>
    <title>
        DOM Style borderRightStyle Property
    </title>
     
    <style>
        .item {
            padding: 10px;
            border: 15px solid green;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>DOM Style borderRightStyle Property</b>
     
    <p class="item">
        GeeksforGeeks is a computer science
        portal with a huge variety of well
        written and explained computer science
        and programming articles, quizzes and
        interview questions.
    </p>
     
    <button onclick="changeBorderStyle()">
        Change style
    </button>
     
    <!-- Script to uses DOM Style borderRightStyle
        Property -->
    <script>
        function changeBorderStyle() {
            elem = document.querySelector('.item');
 
            // Set the border style
            elem.style.borderRightStyle = 'dashed';
        }
    </script>
</body>
 
</html>                   

Output: 

Before clicking the button:

 dashed-before 

After clicking the button:

 dashed-after 

Example 5: This example uses solid property value. 

html




<!DOCTYPE html>
<html>
     
<head>
    <title>
        DOM Style borderRightStyle Property
    </title>
     
    <style>
        .item {
            padding: 10px;
            border: 15px dotted green;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>DOM Style borderRightStyle Property</b>
     
    <p class="item">
        GeeksforGeeks is a computer science
        portal with a huge variety of well
        written and explained computer science
        and programming articles, quizzes and
        interview questions.
    </p>
     
    <button onclick="changeBorderStyle()">
        Change style
    </button>
     
    <!-- Script to uses DOM Style borderRightStyle
        Property -->
    <script>
        function changeBorderStyle() {
            elem = document.querySelector('.item');
 
            // Set the border style
            elem.style.borderRightStyle = 'solid';
        }
    </script>
</body>
 
</html>                   

Output: 

Before clicking the button: 

solid-before 

After clicking the button:

 solid-after 

Example 6: This example uses double property value. 

html




<!DOCTYPE html>
<html>
     
<head>
    <title>
        DOM Style borderRightStyle Property
    </title>
     
    <style>
        .item {
            padding: 10px;
            border: 15px solid green;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>DOM Style borderRightStyle Property</b>
     
    <p class="item">
        GeeksforGeeks is a computer science
        portal with a huge variety of well
        written and explained computer science
        and programming articles, quizzes and
        interview questions.
    </p>
     
    <button onclick="changeBorderStyle()">
        Change style
    </button>
     
    <!-- Script to uses DOM Style borderRightStyle
        Property -->
    <script>
        function changeBorderStyle() {
            elem = document.querySelector('.item');
 
            // Set the border style
            elem.style.borderRightStyle = 'double';
        }
    </script>
</body>
 
</html>                   

Output: 

Before clicking the button: 

double-before 

After clicking the button: 

double-after 

Example 7: This example uses groove property value. 

html




<!DOCTYPE html>
<html>
     
<head>
    <title>
        DOM Style borderRightStyle Property
    </title>
     
    <style>
        .item {
            padding: 10px;
            border: 15px solid green;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>DOM Style borderRightStyle Property</b>
     
    <p class="item">
        GeeksforGeeks is a computer science
        portal with a huge variety of well
        written and explained computer science
        and programming articles, quizzes and
        interview questions.
    </p>
     
    <button onclick="changeBorderStyle()">
        Change style
    </button>
     
    <!-- Script to uses DOM Style borderRightStyle
        Property -->
    <script>
        function changeBorderStyle() {
            elem = document.querySelector('.item');
 
            // Set the border style
            elem.style.borderRightStyle = 'groove';
        }
    </script>
</body>
 
</html>                   

Output: 

Before clicking the button:

 groove-before 

After clicking the button:

 groove-after 

Example 8: This example uses ridge property value. 

html




<!DOCTYPE html>
<html>
     
<head>
    <title>
        DOM Style borderRightStyle Property
    </title>
     
    <style>
        .item {
            padding: 10px;
            border: 15px solid green;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>DOM Style borderRightStyle Property</b>
     
    <p class="item">
        GeeksforGeeks is a computer science
        portal with a huge variety of well
        written and explained computer science
        and programming articles, quizzes and
        interview questions.
    </p>
     
    <button onclick="changeBorderStyle()">
        Change style
    </button>
     
    <!-- Script to uses DOM Style borderRightStyle
        Property -->
    <script>
        function changeBorderStyle() {
            elem = document.querySelector('.item');
 
            // Set the border style
            elem.style.borderRightStyle = 'ridge';
        }
    </script>
</body>
 
</html>                   

Output: 

Before clicking the button:

 ridge-before 

After clicking the button:

 ridge-after 

Example 9: This example uses inset property value. 

html




<!DOCTYPE html>
<html>
     
<head>
    <title>
        DOM Style borderRightStyle Property
    </title>
     
    <style>
        .item {
            padding: 10px;
            border: 15px outset green;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>DOM Style borderRightStyle Property</b>
     
    <p class="item">
        GeeksforGeeks is a computer science
        portal with a huge variety of well
        written and explained computer science
        and programming articles, quizzes and
        interview questions.
    </p>
     
    <button onclick="changeBorderStyle()">
        Change style
    </button>
     
    <!-- Script to uses DOM Style borderRightStyle
        Property -->
    <script>
        function changeBorderStyle() {
            elem = document.querySelector('.item');
 
            // Set the border style
            elem.style.borderRightStyle = 'inset';
        }
    </script>
</body>
 
</html>                   

Output: 

Before clicking the button:

 inset-before 

After clicking the button: 

inset-after 

Example 10: This example uses outset property value. 

html




<!DOCTYPE html>
<html>
     
<head>
    <title>
        DOM Style borderRightStyle Property
    </title>
     
    <style>
        .item {
            padding: 10px;
            border: 15px inset green;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>DOM Style borderRightStyle Property</b>
     
    <p class="item">
        GeeksforGeeks is a computer science
        portal with a huge variety of well
        written and explained computer science
        and programming articles, quizzes and
        interview questions.
    </p>
     
    <button onclick="changeBorderStyle()">
        Change style
    </button>
     
    <!-- Script to uses DOM Style borderRightStyle
        Property -->
    <script>
        function changeBorderStyle() {
            elem = document.querySelector('.item');
 
            // Set the border style
            elem.style.borderRightStyle = 'outset';
        }
    </script>
</body>
 
</html>                   

Output: 

Before clicking the button:

 outset-before 

After clicking the button:

 outset-after 

Example 11: This example uses initial property value. 

html




<!DOCTYPE html>
<html>
     
<head>
    <title>
        DOM Style borderRightStyle Property
    </title>
     
    <style>
        .item {
            padding: 10px;
            border: 15px solid green;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>DOM Style borderRightStyle Property</b>
     
    <p class="item">
        GeeksforGeeks is a computer science
        portal with a huge variety of well
        written and explained computer science
        and programming articles, quizzes and
        interview questions.
    </p>
     
    <button onclick="changeBorderStyle()">
        Change style
    </button>
     
    <!-- Script to uses DOM Style borderRightStyle
        Property -->
    <script>
        function changeBorderStyle() {
            elem = document.querySelector('.item');
 
            // Set the border style
            elem.style.borderRightStyle = 'initial';
        }
    </script>
</body>
 
</html>                   

Output: 

Before clicking the button:

 initial-before 

After clicking the button:

 initial-after 

Example 12: This example uses inherit property value. 

html




<!DOCTYPE html>
<html>
     
<head>
    <title>
        DOM Style borderRightStyle Property
    </title>
     
    <style>
        #parent {
            border-right-style: dotted;
            padding: 10px;
        }
        .item {
            padding: 10px;
            border: 15px solid green;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>DOM Style borderRightStyle Property</b>
     
    <div id="parent">
        <p class="item">
            GeeksforGeeks is a computer science
            portal with a huge variety of well
            written and explained computer
            science and programming articles,
            quizzes and interview questions.
        </p>
    </div>
     
    <button onclick="changeBorderStyle()">
        Change style
    </button>
     
    <!-- Script to uses DOM Style borderRightStyle
        Property -->
    <script>
        function changeBorderStyle() {
            elem = document.querySelector('.item');
 
            // Set the border style
            elem.style.borderRightStyle = 'inherit';
        }
    </script>
</body>
 
</html>                   

Output: 

Before clicking the button:

 inherit-before 

After clicking the button:

 inherit-after 

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

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!