CSS border-left Property

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

Description

The CSS property border-left targets the left edge of an element’s border box and controls the visual line that separates the element’s content/padding from the outside. Conceptually it is one side of the element’s border layer in the box model, so changes to border-left affect the element’s total occupied space unless you’re using a box-sizing model that alters how widths are computed. It’s commonly used to create vertical separators, highlight the leading edge of a component, or establish a visual accent that is independent of the other three sides. You can also influence the left edge using the consolidated border shorthand; see border for that relationship.

From a layout and painting perspective, border-left is part of the border area that sits between an element’s margin and padding. It participates in normal flow just like other border sides: its presence and thickness contribute to the element’s outer dimensions and can affect adjacent elements. How those dimensions are interpreted depends on the element’s sizing model - especially when using box-sizing, which determines whether border thickness is included in the element’s declared width and height. Because the left border is a visual part of the border layer, it will interact with effects that target the border region.

Visually, the left border can be replaced, styled, or complemented by other features. For example, you can substitute an image for the left border edge via border-image, and you should be aware of how an outline differs from a border if you need an effect that doesn’t affect layout - compare with outline. Rounding at the corners also affects how the left border meets the top and bottom edges; when corners are rounded the left edge will be clipped or curved according to the element’s corner radii, see border-radius. These interactions make the left border useful not just for simple lines but as a component in more complex visual treatments and UI affordances.

Definition

Initial value: See individual properties
Applies to: All elements
Inherited: No
Computed value: See individual properties
Animatable: Yes
JavaScript syntax: object.style.borderLeft

Interactive Demo

border-left: 3px solid red;

border-left: 2px dashed #1ECBE1;

border-left: 1rem dotted rgb(156, 234, 87);

border-left: thick solid rgba(123, 45, 87, .5);

border-left: solid;

border-left: dashed purple;

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: <line-width> || <line-style> || <color>

Values

<line-width>See border-left-width CSS property for values.
<line-style>See border-left-style CSS property for values.
<color>See border-left-color CSS property for values.
inherit

Example

HTML

<div class='container'>

    <h2>Border-left examples</h2>

    <div class='box solid'>Solid border-left</div>

    <div class='box dashed'>Dashed border-left</div>

    <div class='box thick'>Thick colored border-left</div>

</div>

CSS

.container {
    font-family: Arial, sans-serif;
    padding: 20px;
    max-width: 600px;
}

.box {
    padding: 12px 16px;
    margin: 12px 0;
    background: #f8f9fb;
    border-left: 8px solid #3498db;
}

.box.dashed {
    border-left: 6px dashed #e67e22;
}

.box.thick {
    border-left: 12px solid #2ecc71;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05);
}

Result

Editor

Browser Support

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