Usage of border-left-style property in CSS

The border-left-style property defines the style of an element's left border. It accepts various values like solid, dashed, dotted, double, and more to create different visual effects.

Syntax

border-left-style: value;

Available Values

Value Description
none No border (default)
solid Solid line
dashed Series of dashes
dotted Series of dots
double Two parallel lines
groove 3D grooved effect
ridge 3D ridged effect

Example: Different Border Styles

<html>
<head>
    <style>
        .demo-box {
            padding: 10px;
            margin: 10px 0;
            border-left-width: 4px;
            border-left-color: #007bff;
        }
    </style>
</head>
<body>
    <div class="demo-box" style="border-left-style: solid;">
        Solid left border
    </div>
    
    <div class="demo-box" style="border-left-style: dashed;">
        Dashed left border
    </div>
    
    <div class="demo-box" style="border-left-style: dotted;">
        Dotted left border
    </div>
    
    <div class="demo-box" style="border-left-style: double;">
        Double left border
    </div>
</body>
</html>

Example: Combined with Other Properties

<html>
<head>
    <style>
        .highlight-box {
            padding: 15px;
            border-left-style: solid;
            border-left-width: 5px;
            border-left-color: #28a745;
            background-color: #f8f9fa;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="highlight-box">
        This content has a green left border accent.
    </div>
</body>
</html>

Key Points

  • The border-left-style property only affects the left border
  • You must set border-left-width for the style to be visible
  • Commonly used with border-left-color and border-left-width
  • Default value is none, which means no border is displayed

Conclusion

The border-left-style property provides flexible styling options for left borders. Combine it with width and color properties to create effective visual accents and design elements.

Updated on: 2026-03-15T23:18:59+05:30

168 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements