CSS border-left

The border-left property adds a left border to an element.

Borders can vary in width, line style, and color.



Three different border-left styles.

3px solid steelblue border
5px double lightblue border
3px dashed red border
  .mydiv {
    padding: 15px;
    margin: 15px 0;

<div class="mydiv" style="border-left: 3px solid steelblue">
  3px solid steelblue border
<div class="mydiv" style="border-left: 5px double lightblue">
  5px double lightblue border
<div class="mydiv" style="border-left: 3px dashed red">
  3px dashed red border

Using border-left

The border-left property is a shorthand for:

If border-left-color is not set, it will inherit the text's color.

If border-left-width is not set, it will default to medium or 1px.


border-left: border-width border-style border-color | 
             initial | inherit;



Value Description
border-width Border width. Default is medium (1px).
border-style Border style. Default is none.
border-color Border color. Default will inherit text color.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

Browser support

This table shows when border-left support started for each browser.

1.0 Dec 2008
1.0 Nov 2004
4.0 Sep 1997
3.5 Nov 1998
1.0 Jun 2003

You may also like

Last updated on Sep 30, 2023