The HTML DOM borderRightStyle property is used for setting or returning the right border style for an element.
Following is the syntax for −
Setting the borderRightStyle property −
object.style.borderRightStyle = value
The above properties are explained as follows −
| Value | Description |
|---|---|
| none | This is the default value specifying no border. |
| hidden | This is same as "none" but will still take border space. It is basically transparent but still there. |
| dotted | This defines a dotted border. |
| dashed | This defines a dashed border. |
| solid | This defines a solid border. |
| double | This defines a double border
groove |
| groove | This defines a 3d groove border and is the opposite of ridge. |
| ridge | This defines a 3D ridged border and is the opposite of groove |
| inset | This defines a 3D inset border and the effect looks like it is embedded. It produces the opposite effect of outset. |
| outset | This defines a 3D inset border and the effect looks like it is embossed. It produces the opposite effect of inset. |
| initial | For setting this property to initial value. |
| inherit | To inherit the parent property value |
Let us look at an example for the borderRightStyle Property −
Example
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
width:300px;
height:100px;
border-Right: 8px solid dodgerblue;
border-Right-style: groove;
}
</style>
<script>
function changeRightStyle(){
document.getElementById("DIV1").style.borderRightStyle="dashed";
document.getElementById("Sample").innerHTML="The Right border style is now changed";
}
</script>
</head>
<body>
<div id="DIV1">SOME SAMPLE TEXT</div>
<p>Change the above div Right border style size by clicking the below button</p>
<button onclick="changeRightStyle()">Change Right Style</button>
<p id="Sample"></p>
</body>
</html>Output
On clicking the “Change Right Style” button −
