CSS - border-left-style Property

Sets style of left border of an element.

Possible Values

  • none − No border. (Equivalent of border-width:0;)

  • solid − Border is a single solid line.

  • dotted − Border is a series of dots.

  • dashed − Border is a series of short lines.

  • double − Border is two solid lines.

  • groove − Border looks as though it is carved into the page.

  • ridge − Border looks the opposite of groove.

  • inset − Border makes the box look like it is embedded in the page.

  • outset − Border makes the box look like it is coming out of the canvas.

  • hidden − Same as none, except in terms of border-conflict resolution for table elements.

Applies to

All the HTML elements.

DOM Syntax

object.style.borderLeftStyle="dashed"

Example

Following example demonstrates border-left-style property −

<html>
   <head>
      <style>
        h2{
            border-style: groove;
            border-left-style: double ;
        }
        p {
           border-style: solid;
           border-left-style: ridge;
        }
      </style>
   </head>
   <body>
        <h2>Left border is double</h2>
        <p>Left border is ridge</p>
   </body>
</html>
Advertisements