Javascript Reference - HTML DOM Style borderRight Property
The borderRight property sets or gets
three separate border-right properties, in a shorthand form.
With this property, we can set and get one or more of the following properties.
- border-left-width
- border-left-style
- border-left-color
Browser Support
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
borderRight |
Yes | Yes | Yes | Yes | Yes |
Syntax
Return the borderRight property:
var v = object.style.borderRight
Set the borderRight property:
object.style.borderRight=width style color|initial|inherit
Property Values
| Parameter | Description |
|---|---|
| width | Set the width of the right border |
| style | Set the style of the right border |
| color | Set the color of the right border |
| initial | Set to default value |
| inherit | Inherit from parent element. |
Technical Details
| Default Value: | not specified |
|---|---|
| Return Value: | A string representing the width, style and color of the right border |
| CSS Version | CSS1 |
Example
The following code shows how to add a right border to a <div> element.
<!DOCTYPE html>
<html>
<body>
<!-- w ww . j ava 2 s .c om-->
<div id="myDiv">This is a div element.</div>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {
document.getElementById("myDiv").style.borderRight = "thick solid #0000FF";
}
</script>
</body>
</html>
The code above is rendered as follows:
Example 2
The following code shows how to change the width, style and color of the right border of a <div> element.
<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!-- w ww.ja va 2s . c o m-->
border: thick solid blue;
}
</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.borderRight = "thin dotted black";
}
</script>
</body>
</html>
The code above is rendered as follows:
Example 3
The following code shows how to get the border-right property values.
<!DOCTYPE html>
<html>
<body>
<div id="myDiv" style="border-right:5px solid red;">This is a div element.</div>
<button type="button" onclick="myFunction()">test</button>
<!--from ww w .jav a 2 s .c o m-->
<script>
function myFunction() {
console.log(document.getElementById("myDiv").style.borderRight);
}
</script>
</body>
</html>
The code above is rendered as follows: