CSS border-left-width Property

The border-left-width property defines the thickness of the left border for an element.

selector { border-left-width: value; }
thin Sets a thin left border, typically 1px in most browsers.
medium The default value, typically 3px in most browsers.
thick Sets a thick left border, typically 5px in most browsers.
<length> Specifies a fixed thickness using units like px, em, or rem.

Code Examples

A basic example showing a solid 10px red border applied only to the left side.

<div style="border-left-style: solid; border-left-width: 10px; border-left-color: #ff0000; padding: 10px;">
    This box has a thick 10px red left border.
</div>

An advanced example using JavaScript to dynamically toggle the border-left-width for a highlight effect.

<div id="statusBox" style="border-left: 0px solid #2196f3; padding: 20px; background: #f0f0f0;">
    Click the button to highlight this message.
</div>
<button onclick="highlight()">Toggle Highlight</button>

<script>
function highlight() {
    const box = document.getElementById("statusBox");
    if (box.style.borderLeftWidth === "0px") {
        box.style.borderLeftWidth = "10px";
    } else {
        box.style.borderLeftWidth = "0px";
    }
}
</script>

Pro Tip

You can use border-left-width combined with a transparent border color to create spacing that behaves like padding but remains outside the element's content area. It is also great for creating vertical accents on sidebar navigation links.

Deep Dive

Think of border-left-width as the thickness of a single vertical wall on the left side of your box. It is a specific piece of the CSS Box Model. While you can define how thick this wall is, it will remain invisible unless you also define a "border-left-style" other than "none" or "hidden". If you use a keyword like "thin", "medium", or "thick", the exact pixel size is determined by the browser, so using specific units like "px" is usually better for precision. This property only affects the left edge, allowing for asymmetrical designs without affecting the top, right, or bottom borders.

Best Practices

Stick to explicit units like "px" for hair-line precision or "em" if you want the border to scale naturally with your font size. Always ensure you have a "border-style" declared, otherwise your width setting is useless.

Common Pitfalls

The biggest trap is forgetting that borders have a default style of "none". You can set the width to "100px", but if there is no style, you will see nothing. Also, remember that borders add to the total width of the element unless you are using "box-sizing: border-box".

Accessibility

Do not rely on border thickness alone to convey meaning, such as indicating an error state. Use high contrast colors so that users with low vision can actually see the border you have sized.

Dev Data Table: border-left-width property

default medium
animatable yes
inherited no
experimental no
year_intro 1996
year_standard 1996
js_syntax_1 element.style.borderLeftWidth = "5px";
js_syntax_2 element.style.setProperty("border-left-width", "5px");
js_note In JavaScript, use camelCase for the property name or the setProperty method with the kebab-case string.
browsers { "Chrome": 1, "Edge": 12, "Firefox": 1, "Safari": 1, "Opera": 3.5, "Chrome Android": 18, "Safari on iOS": 1, "Samsung Internet": 1, "Opera Mobile": 10.1 }
results render here...