Open In App

CSS border-left-style Property

Improve
Improve
Like Article
Like
Save
Share
Report

The 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: 

Value Description
none It sets no left border.
hidden It sets no border, except border conflict resolution for table elements.
dotted It sets a dotted left border.
dashed It sets a dashed left border.
solid It sets a solid left border.
double It sets a double border.
groove It sets a 3D grooved left border.
ridge It sets a 3D ridged left border.
inset It sets a 3D inset left border.
outset It sets a 3D outset left border.
initial It sets the border-left-style property to its default value.
inherit It inherits the property values from its parent element.

Return Value: It returns the style of the 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


Last Updated : 04 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads