Javascript Reference - HTML DOM Style borderRightWidth Property

The borderRightWidth property sets or gets the width of the right border.

Browser Support


`borderRightWidth`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the borderRightWidth property:

var v = object.style.borderRightWidth

Set the borderRightWidth property:

object.style.borderRightWidth=thin|medium|thick|length|initial|inherit

Property Values

Value	Description
thin	thin border
medium	Default value. medium border.
thick	thick border
length	Set border width in length units
initial	Set to its default value.
inherit	Inherit from parent element.

Technical Details

Default Value:	medium
Return Value:	A string representing the right border width
CSS Version	CSS1

Example

The following code shows how to change the right border width to 10px.


<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!--from w  w  w.j ava2  s.  co  m-->
    border-style: solid;
}
</style>
</head>
<body>
<div id="myDiv">This is a div element.</div>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {
    document.getElementById("myDiv").style.borderRightWidth = "10px";
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to change the right border width to thin.


<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!--from  ww w  .  ja v  a  2 s  .  c  o  m-->
    border-style: solid;
}
</style>
</head>
<body>
<div id="myDiv">This is a div element.</div>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {
    document.getElementById("myDiv").style.borderRightWidth = "thin";
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 3

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


<!DOCTYPE html>
<html>
<body>
<div id="myDiv" style="border-right:thick solid red">This is a div element.</div>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {<!--from  w ww.  ja  va 2s .  c o  m-->
    console.log(document.getElementById("myDiv").style.borderRightWidth);
}
</script>

</body>
</html>

The code above is rendered as follows: