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:

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

Advantages of the border-left-width property in CSS

Disadvantages of the border-left-width property in CSS

CSS Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!