Javascript Reference - HTML DOM Style borderRightStyle Property

The borderRightStyle property sets or gets the style of the right border of an element.

Browser Support


`borderRightStyle`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the borderRightStyle property:

var v = object.style.borderRightStyle

Set the borderRightStyle property:

object.style.borderRightStyle=value

Property Values

Value	Description
none	Default. No border.
hidden	Same as 'none', except for table elements
dotted	dotted border
dashed	dashed border
solid	solid line border
double	two line borders.
groove	Defines a 3D grooved border.
ridge	Defines a 3D ridged border.
inset	Defines a 3D inset border.
outset	Defines a 3D outset border.
initial	Sets to default value.
inherit	Inherits from parent element.

Technical Details

Default Value:	none
Return Value:	A string representing the right border style
CSS Version	CSS1

Example

The following code shows how to add a "solid" right border to a <div> element:


<!DOCTYPE html>
<html>
<body>
<div id="myDiv">This is a div.</div>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {<!--  ww  w  .  j a v  a  2s . c o  m-->
    document.getElementById("myDiv").style.borderRightStyle = "solid";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to change the right border style.


<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!--from  w w  w  .  java  2s.  c om-->
    border: thick solid #FF0000;
}
</style>
</head>
<body>
<div id="myDiv">This is a div.</div>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {
    document.getElementById("myDiv").style.borderRightStyle = "dotted";
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to get the right border style.


<!DOCTYPE html>
<html>
<body>
<!--from   www .  j a  v a2 s  .co m-->
<div id="myDiv" style="border-right:double;">This is a div.</div>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {
    console.log(document.getElementById("myDiv").style.borderRightStyle);
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 4

A demonstration of all the different values:


<!DOCTYPE html>
<html>
<body>
<div id="myDiv">This is a div element</div>
<select onchange="myFunction(this);">
  <option>none</option>
  <option>hidden</option>
  <option>dotted</option>
  <option>dashed</option>
  <option>solid</option>
  <option>double</option>
  <option>groove</option>
  <option>ridge</option>
  <option>inset</option>
  <option>outset</option>
</select><!-- w  w w  . j  a v a2 s  . com-->

<script>
function myFunction(selectTag) {
    var listValue = selectTag.options[selectTag.selectedIndex].text;
    document.getElementById("myDiv").style.borderRightStyle = listValue;
}
</script>
</body>
</html>

The code above is rendered as follows: