CSS border-left Property

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.