border-left-style: dashed | dotted | double | groove | hidden | inset | inherit | none | outset | ridge | solid
|
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.
|
<!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> |