CSS border-left-width: Set or Change the Width of the Left Border

The CSS border-left-width property is used when we need to set the width of the left border of an element. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p {border: 3px solid chocolate; padding: 10px; border-left-width: 10px;}
   </style>
</head>
<body>

   <p>This is a para.</p>
   
</body>
</html>

Output

This is a para.

In the above example, I defined the paragraph element "<P>" and applied the CSS style to it. The CSS styles I applied to the paragraph element are:

border: 3px solid chocolate;

sets a 3 pixel wide border around the paragraph element with a solid line style and the color "chocolate." And then:

padding: 10px;

adds 10 pixels of space between the content of the paragraph and its border. Finally:

border-left-width: 10px;

sets the left border width to 10 pixels, creating a thicker left border than the other three borders.

As a result, the above example generates a paragraph element with a 3-pixel wide solid brown border. The paragraph's content will be separated from the border by 10 pixels, and the left border will be thicker than the other three borders.

CSS border-left-width syntax

The syntax of the border-left-width property in CSS is:

border-left-width: x;

The value of x should be any of the following:

thin: used to define a thin left border.
medium: used to define the medium left border.
thick: used to define a thick left border.
length: used to define a custom size left border.
initial: used to define the default value for the size of the left border.
inherit: used to inherit the value from its parent.

Note: In all the above, medium is the default value.

Advantages of the border-left-width property in CSS

By giving an element its own distinct border style apart from the other three borders, you can make a visually appealing design.
You can use it to draw attention to a particular facet of a design.
Instead of having to manually create four different border styles, you can simply create a border that is only applied to one side (left) of an element.

Disadvantages of the border-left-width property in CSS

If the left border width is noticeably thicker than the other three borders, it may result in an unbalanced design.
If the left border width varies between various elements, it may be challenging to maintain consistency.
Older browsers might not support it, which could lead to inconsistent display on various devices.

CSS Online Test

« Previous Tutorial Next Tutorial »

Liked this post? Share it!