border-left-width CSS property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

The border-left-width CSS property sets the width of the left border of an element.

Try it

border-left-width: thick;

border-left-width: 2em;

border-left-width: 4px;

border-left-width: 2ex;

border-left-width: 0;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with a border around it.
  </div>
</section>

#example-element {
  background-color: palegreen;
  color: black;
  border: 0 solid crimson;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

Syntax

css
/* 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: revert;
border-left-width: revert-layer;
border-left-width: unset;

Values

<line-width>

Defines the width of the border, either as an explicit nonnegative <length> or a keyword. If it's a keyword, it must be one of the following values:

thin
- Same as 1px.
medium
- Same as 3px.
thick
- Same as 5px.

Formal definition

Initial valueApplies toInherited Computed value Animation type

medium

all elements. It also applies to ::first-letter.

the absolute length or 0 if border-left-style is none or hidden

a length

border-left-width =
<line-width>

<line-width> =
<length [0,∞]> |
hairline |
thin |
medium |
thick
This syntax reflects the latest standard as per CSS Borders and Box Decorations Module Level 4. Not all browsers may have implemented every part. See Browser compatibility for support information.

Examples

Comparing border widths

HTML

html
<div>Element 1</div>
<div>Element 2</div>

CSS

css
div {
  border: 1px solid red;
  margin: 1em 0;
}

div:nth-child(1) {
  border-left-width: thick;
}
div:nth-child(2) {
  border-left-width: 2em;
}