The CSS border-left-width property settles the width of an element’s left border.
Demo:
Syntax:
border-left-width: medium|thin|thick|length;medium (default) – defines a medium left border.
thin – defines a thin left border.
thick – defines a thick left border.
length – allows you to specify the thickness of the left border (CSS Units).
Example1:
Set the width of the left border to thin:
<!DOCTYPE html>
<html>
<head>
<style>
h4 {
border-left-style: solid;
border-left-width: thin;
}
p {
border-style: solid;
border-left-width: thin;
}
</style>
</head>
<body>
<h4>A heading with a thin left border.</h4>
<p>A paragraph with a thin left border.</p>
</body>
</html>Output:
A heading with a thin left border.
A paragraph with a thin left border.
Example2:
Set the width of the left border to 10px:
<!DOCTYPE html>
<html>
<head>
<style>
h4 {
border-left-style: solid;
border-left-width: 10px;
}
p {
border-style: solid;
border-left-width: 10px;
}
</style>
</head>
<body>
<h4>A heading with a 10px thick left border.</h4>
<p>A paragraph with a 10px thick left border.</p>
</body>
</html>
Output:
A heading with a 10px thick left border.
A paragraph with a 10px thick left border.
Enjoy coding!
Read also:
CSS border-bottom-width Property