border-left-width
defines the width of the left border.
The width is set as a pixel value, or as thin
, medium
, or thick
.
A thick border-left-width
.
<style>
.border-left-thick {
padding: 20px;
width: 300px;
border-left-style: solid;
border-left-color: tomato;
border-left-width: thick;
}
</style>
<div class="border-left-thick">
An element with a thick left border
</div>
The default border-left-width
is medium
or 1 pixel.
A border-left-style value is required for a border to show.
border-left-width: medium | thin | thick | length | initial | inherit;
Value | Description |
---|---|
medium | Default. Medium border |
thin | Thin border |
thick | Thick border |
length | Sets border thickness using CSS units |
initial | Sets the value to its default value. |
inherit | Inherits the value from its parent element. |
Click the buttons to see the different border-left-width
values.
<style>
.border-left-example {
padding: 20px;
width: 300px;
border-left-style: solid;
border-left-color: tomato;
border-left-width: thin;
}
</style>
<div class="border-left-example">
border-left-width: thin
</div>
This table shows when border-left-width
support started for each browser.
Chrome
|
1.0 | Dec 2008 |
Firefox
|
1.0 | Nov 2004 |
IE/Edge
|
4.0 | Sep 1997 |
Opera
|
3.5 | Nov 1998 |
Safari
|
1.0 | Jun 2003 |