Skip to content
Related Articles

Related Articles

Improve Article

CSS | border-left-style Property

  • Last Updated : 07 Aug, 2019

The CSS border-left-style property is used to set the style of the left border of an element.

Syntax:

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

Properties Value:

ValueDescription
noneIt sets no left border.
hiddenIt sets no border, except border conflict resolution for table elements.
dottedIt sets a dotted left border.
dashedIt sets a dashed left border.
solidIt sets a solid left border.
doubleIt sets a double border.
grooveIt sets a 3D grooved left border.
ridgeIt sets a 3D ridged left border.
insetIt sets a 3D inset left border.
outsetIt sets a 3D outset left border.
initialIt sets the border-left-style property to its default value.
inheritIt inherits the property values from its parent element.

Return Value: It returns the style of left border of an element.

Example-1: Showing Dotted Left Border.






<!DOCTYPE html>
<html>
  
<head>
    <style>
        h1 {
            border-left-style: dotted;
        }
          
        div {
            border-style: solid;
            border-left-style: dotted;
        }
    </style>
</head>
  
<body>
  
    <h1>Geeks for Geeks</h1>
  
    <div>
        <h3>Dotted Left Border</h3></div>
  
</body>
  
</html>

Output:

Example-2: Showing Double Left Border




<!DOCTYPE html>
<html>
  
<head>
    <style>
        h1 {
            border-left-style: double;
        }
          
        div {
            border-style: solid;
            border-left-style: double;
        }
    </style>
</head>
  
<body>
  
    <h1>Geeks for Geeks</h1>
  
    <div>
        <h3>Double Left Border</h3></div>
  
</body>
  
</html>

Output:

Example-3: Showing Solid Left Border




<!DOCTYPE html>
<html>
  
<head>
    <style>
        h1 {
            border-left-style: solid;
        }
          
        div {
            border-style: solid;
            border-left-style: solid;
        }
    </style>
</head>
  
<body>
  
    <h1>Geeks for Geeks</h1>
  
    <div>
        <h3>Solid Left Border</h3></div>
  
</body>
  
</html>

Output:

Supported Browsers: The browsers supported by CSS Border Left Style Property are listed below:

  • Google Chrome
  • Firefox
  • Internet Explorer
  • Opera
  • Safari



My Personal Notes arrow_drop_up
Recommended Articles
Page :