W3docs
en
Log in

CSS border-left-width Property

The border-left-width property is used for defining the width of the left border of an element. See all property values with examples and practice yourself.

The CSS border-left-width property defines the width (thickness) of an element’s left border. It is the single-side counterpart of border-width, letting you control just the left edge without touching the top, right, or bottom borders.

The width of the left border — like all the other border sides — can also be set with the border or border-width shorthand properties. Reach for border-left-width when you need to style only the left edge, a common pattern for sidebars, blockquotes, and "callout" stripes down the side of an element.

Why the border must exist first

A border width has no visible effect on its own. The browser only paints a border when a border-style is set (the default style is none), so a declaration like border-left-width: thick; does nothing until you also define a style. Set it with border-left-style or the border-style shorthand:

/* width alone — nothing renders, because the style is still `none` */
.box {
  border-left-width: thick;
}

/* correct — a style is present, so the 5px left border is painted */
.box {
  border-left-style: solid;
  border-left-width: 5px;
  border-left-color: teal;
}

The same applies to color: if you omit border-left-color, the border uses the element’s currentColor (its text color).

Info

The specification doesn't define the exact thickness of each keyword. However, they always follow this order: thin ≤ medium ≤ thick.

Info

The specification does not define how borders of different width and styles connect in the corners.

Initial Valuemedium
Applies toAll elements. It also applies to ::first-letter.
InheritedNo
AnimatableYes. The width of the border is animatable.
VersionCSS1
DOM Syntaxobject.style.borderLeftWidth = "4px";

Syntax

Syntax of CSS border-left-width Property

border-left-width: medium | thin | thick | length | initial | inherit;

Example of the border-left-width property with the "thick" value:

Example of CSS border-left-width Property with thick value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        padding: 10px;
        border-style: dashed;
        border-left-width: thick;
      }
    </style>
  </head>
  <body>
    <h2>Border-left-width example</h2>
    <p>As you can see the width of the left border is set to thick.</p>
  </body>
</html>
Try it Yourself »

Example of the border-left-width property with all the values:

Example of CSS border-left-width Property with medium, thin, thick,px, initial and inherit values

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background: #ccc;
        font-size: 20px;
        text-align: center;
      }
      main div {
        display: flex;
        align-items: center;
        justify-content: center;
        color: black;
        padding-top: 30px;
        padding-bottom: 30px;
        width: 200px;
        height: 100px;
        margin: 15px;
        font-weight: bold;
        border: solid;
      }
      .flex-center {
        display: flex;
        justify-content: center;
      }
      /* border-left-width example classes */
      .b1 {
        border-left-width: medium;
      }
      .b2 {
        border-left-width: thin;
      }
      .b3 {
        border-left-width: thick;
      }
      .b4 {
        border-left-width: 10px;
      }
      .b5 {
        border-left-width: initial;
      }
      .b6 {
        border-left-width: inherit;
      }
    </style>
  </head>
  <body>
    <h1>Border-left-width value examples</h1>
    <main class="flex-center">
      <div class="b1">
        medium
      </div>
      <div class="b2">
        thin
      </div>
      <div class="b3">
        thick
      </div>
    </main>
    <main class="flex-center">
      <div class="b4">
        10px length
      </div>
      <div class="b5">
        initial
      </div>
      <div class="b6">
        inherit
      </div>
    </main>
  </body>
</html>
Try it Yourself »

Result

![CSS border-left-width Property](/uploads/media/default/0001/03/6406dd863a4db0df218023217fcf17f182a53660.png "CSS border-left-width Property" =420x)

Values

ValueDescriptionPlay it
mediumDefines medium left border. It is the default value of this property.Play it »
thinDefines a thin left border. It is up to the user agent to determine the exact width.Play it »
thickDefines a thick left border. It is up to the user agent to determine the exact width.Play it »
lengthDefines the the thickness length of the left border. For example, 10px, 5em, 8pt, etc.Play it »
initialSets the property to its default value.Play it »
inheritInherits the property from its parent element.
Info

Percentages are not allowed for border widths — border-left-width: 50% is invalid and the declaration is ignored. Use a fixed length (px, em, rem) or one of the keywords instead.

Things to keep in mind

  • A style is required. Width and color are inert until border-style is set to something other than none.
  • Keyword thickness is browser-defined. thin, medium, and thick have no fixed pixel values in the spec; they only guarantee the order thin ≤ medium ≤ thick. For pixel-perfect designs, use an explicit length.
  • It affects layout. The border width is added to the element’s rendered size unless box-sizing is set to border-box, in which case the border is drawn inside the declared width.
  • Animatable. The value can be transitioned and animated, which makes border-left-width handy for hover-stripe effects.

Practice

Practice
Which of the following values can be used with the border-left-width property in CSS?
Which of the following values can be used with the border-left-width property in CSS?
Was this page helpful?