Style property borderRightStyle in Javascript

The style property borderRightStyle used to set and retrieve the style of the right border of an element. It returns a string that represents the style of an element's right border.

Syntax

 1 <element>.style.borderRightStyle // to retrieve
 2 <element>.style.borderRightStyle = <value> // to set

element : an HTML element to apply style property borderRightStyle, it is required

value : a value for the property borderRightStyle, it is required

Possible values

1. none : It defines no border and it is default, if not specified2. hidden : It is same as 'none', except in border conflict resolution for table elements3. dotted : It allows to define a dotted border for the element4. dashed : It allows to define a dashed border for the element5. solid : It allows to define a solid border for the element6. double : It allows to define two borders, the width of the two borders are the same as the border-width value7. groove : It allows to define a 3D grooved border, the effect depends on the border-color value8. ridge : It allows to define a 3D ridged border, the effect depends on the border-color value9. inset : It allows to define a 3D inset border, the effect depends on the border-color value10. outset : It allows to define a 3D outset border, the effect depends on the border-color value11. initial : It sets this property to its default value12. inherit : It inherits this property from its parent element

Style property borderRightStyle

 1 <!DOCTYPE html>
 2 <html>
 3 	<style>
 4 	.container {
 5 	  width: 300px;
 6 	  padding: 25px;
 7 	  margin: 10px 0;
 8 	  border: 3px dotted blue;
 9 	}
 10 	</style>
 11 <body>
 12 	<h1>HTML Style Object</h1>
 13 	<h2>The borderRightStyle property</h2>
 14 
 15 	<div id="content" class="container">
 16 	  My Content to display border
 17 	</div>
 18 
 19 	<button onclick="applyStyle()">Border color</button>
 20 	<button onclick="location.reload()">Reload</button>
 21 	<script>
 22 	function applyStyle() {
 23 	  const element = document.getElementById("content");
 24 	  element.style.borderRightStyle = "solid";
 25 	}
 26 	</script>
 27 </body>
 28 </html>

In the above example, a document is created with elements that include script element. A script element define a function the retrieve an element having ID content and set style property borderRightStyle to solid that will be called on button click. The change will be visible on UI.

Style property borderRightStyle

Related options for your search

HTML style object in Javascript

Style property borderBottomStyle in Javascript

Style property borderLeftStyle in Javascript

Style property borderTopStyle in Javascript

Style property borderStyle in Javascript

Style property columnRuleStyle in Javascript

Style property fontStyle in Javascript

Style property listStyleImage in Javascript

Style property listStyleType in Javascript

Style listStyle properties in Javascript