The border-left-width CSS property sets the width of the left border of a box.
/* Keyword values */ border-left-width: thin; border-left-width: medium; border-left-width: thick; /* <length> values */ border-left-width: 10em; border-left-width: 3vmax; border-left-width: 6px; /* Global keywords */ border-left-width: inherit; border-left-width: initial; border-left-width: unset;
| Initial value | medium |
|---|---|
| Applies to | all elements. It also applies to ::first-letter. |
| Inherited | no |
| Media | visual |
| Computed value | the absolute length or 0 if border-left-style is none or hidden
|
| Animation type | a length |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
<br-width><length> or a keyword. If it's a keyword, it must be one of the following values: thin | A thin border | |
medium | A medium border | |
thick | A thick border |
Note: Because the specification doesn't define the exact thickness denoted by each keyword, the precise result when using one of them is implementation-specific. Nevertheless, they always follow the pattern thin ≤ medium ≤ thick, and the values are constant within a single document.
<br-width>where
<br-width> = <length> | thin | medium | thick
<div>Element 1</div> <div>Element 2</div>
div {
border: 1px solid red;
margin: 1em 0;
}
div:nth-child(1) {
border-left-width: thick;
}
div:nth-child(2) {
border-left-width: 2em;
} | Specification | Status | Comment |
|---|---|---|
| CSS Backgrounds and Borders Module Level 3 The definition of 'border-left-width' in that specification. | Candidate Recommendation | No significant change. |
| CSS Level 2 (Revision 1) The definition of 'border-left-width' in that specification. | Recommendation | No significant change. |
| CSS Level 1 The definition of 'border-left-width' in that specification. | Recommendation | Initial definition. |
| Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 1 | Yes | 1 | 4 | 3.5 | 1 |
| Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|---|
| Basic support | 2.3 | ? | Yes | 4 | 6 | 11 | 1 |
border-bottom-width, border-right-width, border-top-width, and border-width.border, border-left, border-left-style, and border-left-color.
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width