CSS border-left-style Property

CSS border-left-style Property


CSS border-left-style Property
This property defines the style for the left border of an element. 
border-style is used to set the style of the left border and is set to a value of dashed, dotted, double, groove, hidden, inset, none, outset, ridge, or solid.
Syntax -
border-left-style: dashed | dotted | double | groove | hidden | inset | inherit | none | outset | ridge | solid
Now we will see the values with their descriptions -
Value
Description
none
Specifies no border, and this is the default value.
hidden
This is just the same as having no value, except in border conflict resolution.
dotted
Specifies a dotted border
dashed
Specifies a dashed border
solid
Specifies a solid border
double
Specifies a double border
groove
Specifies a 3D grooved border.
ridge
Specifies a 3D ridged border. 
inset
Specifies a 3D inset border. 
outset
Specifies a 3D outset border. 
 
Now we will see Example 
Example - different border styles -
<!DOCTYPE html>
<html>

  <style>
.one{
  border: 4px solid;
  border-style: solid;
  border-left-style: dashed; 

}

.two{ 
  border: 4px solid;
  border-style: solid;
  border-left-style:dotted; 

}

.three{
  border: 4px solid;
  border-style: solid;
  border-left-style:double;   

}

.four{
  border: 4px solid;
  border-left-style:groove; 

}
  </style>

<body>

<p class="one">This is a sample pera Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi illo ipsa harum, laudantium ipsam disti</p>

<p class="two">This is a sample pera Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi illo ipsa harum, laudantium ipsam disti</p>

<p class="three">This is a sample pera Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi illo ipsa harum, laudantium ipsam disti</p>

<p class="four">This is a sample pera Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi illo ipsa harum, laudantium ipsam disti</p>


</body>

</html>
Output -