CSS border-left-width Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The border-left-width CSS property controls the thickness of an element’s left border edge. It determines how much horizontal space the left border occupies when the element is painted, and therefore directly affects the visual weight of that edge - from a hairline accent to a heavy bar - without changing the border’s color or drawing style. Conceptually it targets only the left side of the four border edges, so it is used when you need asymmetric borders or when only one side should stand out.

The visible result of border-left-width depends on the left border’s drawing style: if the left border is set to a non-rendering style such as none or hidden then the width has no visual effect; for more on how the style interacts with the width see border-left-style. You can also establish left-border thickness as part of a shorthand declaration that sets multiple border properties at once - for example, shorthands that affect all four edges at once are documented under border. When multiple declarations intersect, the cascade rules and the more specific declarations determine the effective left-border thickness used during painting.

In terms of layout and the box model, the left border’s thickness contributes to the element’s border box and therefore can affect available space for content and positioning of neighboring elements. How that contribution affects the element’s outer size depends on the element’s sizing model; for example, whether the border adds to the element’s external dimensions or is accounted for inside the element is governed by box-sizing. From a rendering perspective, changing the left border width is an operation that typically repaints affected areas and can be animated or transitioned smoothly by the compositor, so it can be used for visual effects, emphasis, and dynamic UI affordances without altering other border attributes like color or style.

Definition

Initial value: medium
Applies to: All elements
Inherited: No
Computed value: Absolute length; '0' if the border style is 'none' or 'hidden'
Animatable: Yes
JavaScript syntax: object.style.borderLeftWidth

Interactive Demo

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

Syntax

border-left-width: <line-width>

Values

<line-width> = <length> | thin | medium | thick

thinLess than the default width.
mediumDefault value.
thickGreater than the default width.
<length>Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px).
inherit

Example

HTML

<div class="examples">

    <div class="box thin">Thin (border-left-width: 2px)</div>

    <div class="box medium">Medium (border-left-width: 8px)</div>

    <div class="box thick">Thick (border-left-width: 16px)</div>

</div>

CSS

body {
    font-family: Arial, sans-serif;
}

.examples {
    display: flex;
    gap: 20px;
    padding: 20px;
}

.box {
    padding: 16px 20px;
    background: #f8f8f8;
    border-left-style: solid;
    border-left-color: #007acc;
}

.box.thin {
    border-left-width: 2px;
}

.box.medium {
    border-left-width: 8px;
}

.box.thick {
    border-left-width: 16px;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS border-left-width property. Hover over a browser icon to see the version that first introduced support for this CSS property.