CSS border-left (Set/Change Left Border)

The CSS border-left property is used when we need to set 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.

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

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

CSS border-left Syntax

The syntax of 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.

CSS Online Test


« Previous Tutorial Next Tutorial »