HTML DOM Style borderLeftStyle Property

HTMLDOMWeb DevelopmentFront End Technology

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 −

ValueDescription
NoneThis is the default value specifying no border.
HiddenThis is same as "none" but will still take border space. It is basically transparent but still there.
dottedThis defines a dotted border.
dashedThis defines a dashed border.
solidThis defines a solid border.
doubleThis defines a double border
grooveThis defines a 3d groove border and is the opposite of ridge
ridgeThis defines a 3D ridged border and is the opposite of groove
insetThis defines a 3D inset border and the effect looks like it is embedded. It produces the opposite effect of outset.
outsetFor setting this property to initial value.
initialFor setting this property to initial value.
inheritTo inherit the parent property value

Let us look at an example for the borderLeftStyle Property −

Example

 Live Demo

<!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 −

raja
Published on 22-Oct-2019 17:24:23
Advertisements