CSS border-left: Set or Change the Left Border

The CSS border-left property is used when we need to set the width, style, and color of the left border at once. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      p {border-left: 4px solid crimson; padding: 10px;}
   </style>
</head>
<body>

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

This is a para.

In the above example, the following CSS code:

p {border-left: 4px solid crimson; padding: 10px;}

targets all "p" elements on the web page and applies two styles to them.

The first style, border-left, adds a border to the paragraph's left side. The border in this case has a width of 4 pixels, a solid style, and the color crimson, which is a shade of red.

The second style, "padding," adds 10 pixels of space inside the paragraph on all sides, including the top, bottom, left, and right. This helps to create a visual separation between the text and the border.

When applied to the given HTML code, the result would be a single paragraph element that has a crimson-colored border along its left side, and some padding inside of it. The width of the paragraph would be determined by its content, as the "border-left" and "padding" styles do not affect the width of the element itself.

The border-left is basically used as a shorthand for the following three properties:

Note: In all three properties, the border-left-style is required.

CSS border-left syntax

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

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

Note: The initial is used to set the default color. The inherit is used to inherit the value from its parent.

Advantages of the border-left property in CSS

Disadvantages of the border-left property in CSS

CSS Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!