CSS border-left-width Property

Description

The border-left-width CSS property is used to specify the width of the left border of an element. Borders are commonly applied to elements to create visual distinctions, and this property allows you to control the thickness of the left border independently of the other three borders (top, right, and bottom) using a specified measurement unit, such as pixels, ems, or percentages. By adjusting the "border-left-width," you can achieve various design effects, from creating thin lines to thick dividers, helping to define the layout and appearance of web page elements.

Initial value
medium
Applies to
All elements
Inherited
No
Computed value
Absolute length; '0' if the border style is 'none' or 'hidden'
Animatable
Yes
JavaScript syntax
object.style.borderLeftWidth

Syntax

border-left-width: <line-width> 

Values

<line-width> = <length> | thin | medium | thick
  • thinLess than the default width.
  • mediumDefault value.
  • thickGreater than the default width.
  • <length>Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px).
  • inherit

Example

<div class="border">This is an example of the border-left-width property using a red solid border 3px in width.</div>
.border {
   border: 1px solid blue;
   border-left-style: solid;
   border-left-width: 3px;
   border-left-color: red;
   margin: 20px;
   padding: 20px;
}

Give it a Try

Click the button below to experiment with this property.

Give it a Try!

Browser Support

The following table will show you the current browser support for the CSS border-left-width property.

Desktop
Edge Chrome Firefox Opera Safari
12113.51
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
18410.1112.2

Last updated by CSSPortal on: 23rd September 2023