HTML | DOM Style borderRightStyle Property
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:
| Value | Effect |
|---|---|
| none | No border is created. It is the default value. |
| hidden | It is same as ‘none’ property, except it helps during border conflict resolution in table elements. |
| dotted | It uses dotted lines as border. |
| dashed | A dashed line is used as the border. |
| solid | A single solid line is used as the border. |
| double | Two lines are used as the border. |
| groove | A 3D grooved border is displayed. The effect depends on border-color value. |
| ridge | A 3D ridged border is displayed. The effect depends on border-color value. |
| inset | A 3D inset border is displayed. The effect depends on border-color value. |
| outset | A 3D outset border is displayed. The effect depends on border-color value. |
| initial | It sets the property to its default value. |
| inherit | It 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">w3wiki</h1> <b>DOM Style borderRightStyle Property</b> <p class="item"> w3wiki 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:
After clicking the button:
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">w3wiki</h1> <b>DOM Style borderRightStyle Property</b> <p class="item"> w3wiki 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:
After clicking the button:
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">w3wiki</h1> <b>DOM Style borderRightStyle Property</b> <p class="item"> w3wiki 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:
After clicking the button:
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">w3wiki</h1> <b>DOM Style borderRightStyle Property</b> <p class="item"> w3wiki 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:
After clicking the button:
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">w3wiki</h1> <b>DOM Style borderRightStyle Property</b> <p class="item"> w3wiki 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:
After clicking the button:
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">w3wiki</h1> <b>DOM Style borderRightStyle Property</b> <p class="item"> w3wiki 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:
After clicking the button:
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">w3wiki</h1> <b>DOM Style borderRightStyle Property</b> <p class="item"> w3wiki 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:
After clicking the button:
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">w3wiki</h1> <b>DOM Style borderRightStyle Property</b> <p class="item"> w3wiki 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:
After clicking the button:
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">w3wiki</h1> <b>DOM Style borderRightStyle Property</b> <p class="item"> w3wiki 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:
After clicking the button:
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">w3wiki</h1> <b>DOM Style borderRightStyle Property</b> <p class="item"> w3wiki 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:
After clicking the button:
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">w3wiki</h1> <b>DOM Style borderRightStyle Property</b> <p class="item"> w3wiki 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:
After clicking the button:
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">w3wiki</h1> <b>DOM Style borderRightStyle Property</b> <div id="parent"> <p class="item"> w3wiki 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:
After clicking the button:
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
Contact Us