Skip to content
Related Articles

Related Articles

CSS | border-left-style Property

View Discussion
Improve Article
Save Article
  • Last Updated : 01 Jul, 2022

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

Default Value

  • none

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.  

html




<!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  

html




<!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  

html




<!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 1.0
  • Edge 12
  • Firefox 1
  • Internet Explorer 5.5
  • Opera 9.2
  • Safari 1.0

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!