CSS border-left Property

CSS border-left property is a shorthand property for setting all the left border properties in one statement.

CSS border-left property all values are optional except border-style.

Following properties can be sets,

Usages

The following table outline the usages and version history of this property.

Default value: See individual properties
Applies to: All elements
Inherited: No
Version: CSS1
JavaScript Syntax: object.style.borderLeft = "2px solid grey"

Syntax

Here is a syntax for the CSS border-left property

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

Property Values

The following table describes the values of this property.

Value Description
border-left-width Specifies the width of the left border of an element
border-left-style Specifies the style of the left border of an element
border-left-color Specifies the color of the left border of an element
transparent value also accepted here
initial Sets default value of this property
inherit Inherits this property from its parent element.

Examples

The example below shows to sets left border width, style, color values.

.border-1 {
  border-left: 5px solid pink;
}
.border-2 {
  border-left: 5px dashed pink;
}
.border-3 {
  border-left: 5px dotted pink;
}
.border-4 {
  border-left: 5px double pink;
}
.border-5 {
  border-left: 5px groove pink;
}
.border-6 {
  border-left: 5px ridge pink;
}
.border-7 {
  border-left: 5px inset pink;
}
.border-8 {
  border-left: 5px outset pink;
}
.border-9 {
  border-left: 5px hidden pink;
}
.border-10 {
  border-left: none;
}

Run it...   »

Browser Compatibility

  • Google Chrome 1+
  • Mozilla Firefox 1+
  • Internet Explorer 4+
  • Opera 4+
  • Safari 1+

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.