CSS Reference Property

border-left

The border-left property is a shorthand property used to specify the width, style and color of the left border of an element.

It is a shorthand property for the longhand properties: border-left-width, border-left-style and border-left-color properties of an element.

The border-left property can accept one, two or three arguments as a value—omitted values are set to their initial values.

Official Syntax

  • Syntax:

    border-left: <line-width> || <line-style> || <color>
    
  • Initial: 0 none currentColor, which is the concatenation of the initial values of the long-hand properties.
  • Applies To: all elements
  • Animatable: The width and color of the border are animatable.

Values

<line-width>

The width of the left border. Refer to the border-left-width property entry for a list of possible values.

<line-style>

The style of the left border. Refer to the border-left-style property entry for a list of possible values.

<color>
The color of the left border. Refer to the border-left-color property entry for a list of possible values.

Examples

The following are all valid border-left values set on an element.

.element {
    border-left: 1em; /* style and color are set to their initial values */

    /* or */
    border-left: dotted deepPink; /* width is set to its initial value (0), which means that no left border will be set */

    /* or */
    border-left: 1px dotted #eee;

    /* or */
    border-left: 10px solid #009966;
}
                

Live Demo

Have a look at the live demo:

View this demo on the Codrops Playground

Browser Support

The property works in all major browsers: Chrome, Firefox, Safari, Opera, IE, and on Android and iOS.

Written by . Last updated February 4, 2015 at 2:35 pm by Manoela Ilic.

Do you have a suggestion, question or want to contribute? Submit an issue.