CSS border-left-style (Set/Change Style of Left Border)

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

HTML with CSS Code

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

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

Output

This is a para.

CSS border-left-style Syntax

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

border-left-style: solid|dashed|dotted|double|ridge|groove|inset|outset|initial|inherit|none|hidden;

Note: All border style values are described in a separate post. However, following is a list of values with a brief description that might help you if you don't have time to visit the separate post.

"none": No border is displayed.
"hidden": Same as "none," except that the space where the border would be is still reserved.
"dotted": The border is a series of dots.
"dashed": The border is a series of short dashes.
"solid": The border is a solid line.
"double": The border is a double line.
"groove": The border has a 3D groove effect.
"ridge": The border has a 3D ridge effect.
"inset": The border has a 3D inset effect.
"outset": The border has a 3D outset effect.

Advantages of the "border-left-style" in CSS

The border-left-style property enables simple customization of an element's left border's appearance.
It can be used to create visually appealing effects, such as the 3D effects of groove, ridge, inset, and outset.
It can be combined with border-left-width and border-left-color to produce more complex styles.

Disadvantages of the "border-left-style" in CSS

An excessive amount of border styles can make a page appear cluttered or busy.
Some styles (such as dotted or dashed) may be difficult to see on some screens, particularly at small sizes.
To achieve the desired effect, fine-tuning border styles can be time-consuming.

CSS Online Test

« Previous Tutorial Next Tutorial »