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 −