Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Change the style of left border with CSS

Javascript Web Development Front End Scripts

The border-left-style property in CSS allows you to change the style of an element's left border. This property accepts various values like solid, dashed, dotted, double, and more to create different visual effects.

Syntax

border-left-style: value;

Available Border Styles

The border-left-style property accepts several values:

  • solid - A single solid line
  • dashed - A series of dashes
  • dotted - A series of dots
  • double - Two parallel lines
  • groove - A 3D grooved border
  • ridge - A 3D ridged border
  • inset - A 3D inset border
  • outset - A 3D outset border
  • none - No border
  • hidden - Same as none but for table elements

Basic Example

<html>
   <head>
      <style>
         .solid-border {
            border-left-width: 5px;
            border-left-style: solid;
            border-left-color: #007bff;
            padding: 10px;
            margin: 10px 0;
         }
      </style>
   </head>
   <body>
      <p class="solid-border">
         This paragraph has a solid left border
      </p>
   </body>
</html>

Multiple Border Styles Example

<html>
   <head>
      <style>
         .border-example {
            border-left-width: 4px;
            border-left-color: #28a745;
            padding: 15px;
            margin: 8px 0;
            background-color: #f8f9fa;
         }
         
         .solid { border-left-style: solid; }
         .dashed { border-left-style: dashed; }
         .dotted { border-left-style: dotted; }
         .double { border-left-style: double; border-left-width: 6px; }
      </style>
   </head>
   <body>
      <div class="border-example solid">Solid left border</div>
      <div class="border-example dashed">Dashed left border</div>
      <div class="border-example dotted">Dotted left border</div>
      <div class="border-example double">Double left border</div>
   </body>
</html>

Using Shorthand Property

You can also use the shorthand border-left property to set width, style, and color in one declaration:

<html>
   <head>
      <style>
         .shorthand-border {
            border-left: 3px dashed #dc3545;
            padding: 12px;
            margin: 10px 0;
         }
      </style>
   </head>
   <body>
      <p class="shorthand-border">
         Left border using shorthand property
      </p>
   </body>
</html>

Comparison of Border Styles

Style Appearance Best Use Case
solid Single continuous line General borders, emphasis
dashed Series of dashes Temporary or draft content
dotted Series of dots Subtle separations
double Two parallel lines Strong emphasis, headers

Conclusion

The border-left-style property provides flexible styling options for left borders. Use solid borders for emphasis, dashed for temporary content, and double for strong visual separation.

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

153 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements