CSS border-left-width Property

What You’ll Learn

The border-left-width property sets how thick the left border is on an element. It is useful when you want precise control over quote bars and left-edge accents.

Definition and Usage

The border-left-width CSS property allows you to specify the thickness of the left border of an element. This property is part of the border longhand family and is used to control the width of the border along the left edge.

By adjusting this property, you can enhance visual separation between elements and create more defined layouts with subtle 1px dividers or prominent accent lines.

📝 Syntax

The syntax for border-left-width is straightforward. It accepts keyword values or length units.

selector {
  border-left-width: <length> | thin | medium | thick;
}

Basic Example

div {
  border-left-width: 10px;
  border-left-style: solid;
  border-left-color: black;
}

The value can be a keyword such as thin or a length such as 10px, 0.25em, or 1rem.

Syntax Rules

• The initial value is medium, typically around 3 to 4 pixels.
• Keywords: thin, medium, and thick.
• Length values use units like px, em, or rem.
• Pair with border-left-style and border-left-color for full control.
• Use border-left shorthand when setting width, style, and color together.

Default Value

The default value of border-left-width is medium, which typically corresponds to a width of around 3 to 4 pixels depending on the browser’s default settings.

💎 Property Values

The border-left-width property accepts keyword values and length units.

Left Border Width and Text Direction

border-left-width always sets the thickness of the physical left border. Text direction does not move the border — compare with border-inline-start-width when building RTL layouts.

border-left-width vs border-inline-start-width

Examples Gallery

Try border-left-width with pixel lengths, keyword sizes, width comparisons, and left-edge overrides.

<style>
  div {
    border-left-width: 10px;
    border-left-style: solid;
    border-left-color: black;
    padding: 0.75rem 1rem;
  }
</style>

<div>This div has a 10px wide left border.</div>

<style>
  .quote {
    border-left-width: thin;
    border-left-style: dashed;
    border-left-color: blue;
    padding: 0.75rem 1rem;
  }
</style>

<div class="quote">This callout has a thin left border.</div>

.w-1 {
  border-left: 1px solid #64748b;
}
.w-4 {
  border-left-width: 4px;
  border-left-style: solid;
  border-left-color: #2563eb;
}
.w-8 {
  border-left: 8px solid #dc2626;
}

.card {
  border: 1px solid #cbd5e1;
  border-left-width: 6px;
  border-left-color: #2563eb;
  padding: 1rem;
  border-radius: 0.5rem;
}

💡 Best Practices