The HTML DOM borderStyle property is used as a shorthand for getting or setting the border style properties for an element. It takes from one to 4 values in the following ways −
It assigns border-styles in the clockwise direction if all 4 values are given.
If only one value is given then the same style is applied to all 4 borders.
If two values are given then top and bottom are set to first value and left and right are set to second value.
Following is the syntax for −
Setting the borderStyle property:
object.style.borderLeftStyle = 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 | 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 borderStyle Property −
Example
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
width:300px;
height:100px;
border: 8px solid dodgerblue;
border-style: groove;
}
</style>
<script>
function changeBorderStyle(){
document.getElementById("DIV1").style.borderStyle="dashed";
document.getElementById("Sample").innerHTML="The border style is now changed to dashed";
}
</script>
</head>
<body>
<div id="DIV1">SOME SAMPLE TEXT</div>
<p>Change the above div border style by clicking the below button</p>
<button onclick="changeBorderStyle()">Change Border Style</button>
<p id="Sample"></p>
</body>
</html>Output
On clicking the “Change Border Style” button −
