CSS border-left property

Definition and usage

The border-left shorthand property sets all the properties of the left border in one declaration.

The following properties can be set in order:

If one of the values is not set, it will not cause any problem, for example, border-left:solid #ff0000; is also allowed.

See also:

CSS Tutorial:CSS Borders

HTML DOM Reference Manual:borderLeft property

Example

Set the left border style:

p
  {
  border-style:solid;
  border-left:thick double #ff0000;
  }

Try it yourself

CSS syntax

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

Property value

Value Description
border-left-width Specifies the width of the left border. See also:border-left-width Possible values.
border-left-style Specifies the style of the left border. See also:border-left-style Possible values.
border-left-color Specifies the color of the left border. See also:border-left-color Possible values.
inherit Specifies that the border-left property should inherit the settings from the parent element.

Technical details

Default value: not specified
Inheritance: no
Version: CSS1
JavaScript syntax: object.style.borderLeft="3px solid blue"

More examples

All left border properties in one declaration
All left border properties in one declaration

Browser support

The numbers in the table indicate the first browser version that fully supports this property.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 3.5 1.0

Note:Browsers prior to IE7 do not support the value "inherit". IE8 requires !DOCTYPE. IE9 supports "inherit".