
The CSS border-left-style property settles the style of an element’s left border.
Demo:
Syntax:
border-left-style: dotted|dashed|solid|double|groove|ridge|inset|outset|none|hidden|;
none (default) – defines no border.
hidden – a border is not visible.
dotted – defines a dotted border.
dashed – defines a dashed border.
solid – defines a solid border.
double – defines a double border.
groove – defines a 3D grooved border.
ridge – defines a 3D ridged border.
inset – defines a 3D inset border.
outset – defines a 3D outset border.
Example1:
A dashed left border:
<!DOCTYPE html>
<html>
<head>
<style>
h4 {
border-left-style: dashed;
padding:10px;
}
p {
border-style: solid;
border-left-style: dashed;
padding:10px;
}
</style>
</head>
<body>
<h4>A heading with a dashed left border.</h4>
<p>A paragraph with a dashed left border.</p>
</body>
</html>
Output:
A heading with a dashed left border.
A paragraph with a dashed left border.
Example2:
A dotted left border:
<!DOCTYPE html>
<html>
<head>
<style>
h4 {
border-left-style: dotted;
}
p {
border-style: solid;
border-left-style: dotted;
}
</style>
</head>
<body>
<h4>A heading with a dotted left border.</h4>
<p>A paragraph with a dotted left border.</p>
</body>
</html>
Output:
A heading with a dotted left border.
A paragraph with a dotted left border.
Enjoy coding!
Read also: