The borderLeftStyle property is used for setting or returning the left border style for an element.
Following is the syntax for −
Setting the borderLeftStyle 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 | For setting this property to initial value. |
| initial | For setting this property to initial value. |
| inherit | To inherit the parent property value |
Let us look at an example for the borderLeftStyle Property −
Example
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
width:300px;
height:100px;
border-left: 8px solid dodgerblue;
border-left-style: groove;
}
</style>
<script>
function changeLeftStyle(){
document.getElementById("DIV1").style.borderLeftStyle="dashed";
document.getElementById("Sample").innerHTML="The left border style is now changed";
}
</script>
</head>
<body>
<div id="DIV1">SOME SAMPLE TEXT</div>
<p>Change the above div left border style size by clicking the below button</p>
<button onclick="changeLeftStyle()">Change Left Style</button>
<p id="Sample"></p>
</body>
</html>Output
On clicking the “Change Left Style” button −
