Aquileo | CSS border-left-style Property

The border-left-style property in CSS is used to specify the style of the left border of an element. It determines how the left border appears, such as solid, dotted, or dashed.

It supports values like solid, dashed, dotted, double, groove, etc.
The border is visible only when a style other than none or hidden is applied.
It is typically used with border-left-width and border-left-color for complete styling.

Syntax:

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

Default Value: none

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:

CSS border-left-style Property

Explore