CSS border-left-width Property

CSS border-left-width property specifies the thickness of the element’s left-border.

The thickness of the border can be set using keywords like ‘thin’, ‘medium’, ‘thick’, or using a valid CSS length format like ‘px’, ’em’, ‘rem’ etc.

See the paragraph below. It has a thick left border.

This paragraph has a thick left border.

Example:

p.medium{
  border-left-width: medium;
}
p.thin{
  border-left-width: thin;
}
p.thick{
  border-left-width: thick;
}
p.pixel{
  border-left-width: 5px;
}

Note: An element must have a border before applying the border-left-width property. Otherwise, the property will have no effect on the element.


CSS Syntax

The border-left-width property has below syntax:

border-left-width: medium|thin|thick|length|initial|inherit;

Property Values

The border-left-width property accepts the following values:

mediumSpecifies a medium thickness left border. This is the default value.
thinSpecifies a thin left border.
thickSpecifies a thick left border.
lengthSpecifies the thickness of the left border in a valid CSS length format such as ‘px’, ’em’, ‘rem’, ‘cm’,etc.
initialSets the border-left-width to its default value(medium).
inheritInherits the border-left-width from its parent element.

General Info

Default Valuemedium
InheritedNo
JavaScript Usageelement.style.borderLeftWidth = “3px”

More Examples

Set the left border width using ‘rem’.

Example:

p{
  border-left-width: 0.3rem;
}

Set the left border width using ’em’.

Example:

p{
  border-left-width: 0.3em;
}

Related Pages

CSS Tutorial: CSS Borders