CSS border-left Property

CSS border-left property specifies an element’s left side border. It sets the width, style, and color of the left border in a single declaration.

This paragraph has a blue color left border.

The border-left property is a shorthand of the following three properties:

Example:

h1{
  border-left: 5px solid red;
}
h2{
  border-left: 5px dashed blue;
}
p{
  border-left: dotted; /* pass only required value */
}

If the color of the border is not specified, it will be same as element’s text color. See the example below:

Example:

h1{
  color: red; 
  border-left: solid; /* border color not specified */
}
h2{
  color: green;   
  border-left: dashed; /* border color not specified */
}

CSS Syntax

The border-left property has following syntax:

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

Property Values

The border-left property accepts following values:

border-left-widthSpecifies the width of the left border. The default value is medium.
border-left-styleSpecifies the style of the left border like ‘solid’, ‘dashed’, etc. Default value is solid.
border-left-colorSpecifies the color of the left border. Default value is the current color of the element.
initialSets the border-left property to its default value. Which is none.
inheritInherits the border-left property from the element’s parent.
noneThis is the default value. It removes any existing left border(On setting border-left to none means setting border-left-style to none).

General Info

Default Valuenone
InheritedNo
JavaScript Usageelement.style.borderLeft = “5px solid red”

Related Pages

CSS Tutorial: CSS Borders