CSS border-left-style Property

Last Updated : 23 Aug, 2024

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

CSS border-left-style Property – FAQs

What is the border-left-style property in CSS?

The border-left-style property in CSS defines the style of the left border of an element. It controls the pattern, such as solid, dotted, dashed, or other predefined border styles for the left edge.

Can I have different border styles on each side of an element?

Yes, you can apply different styles for each side of an element using properties like border-left-style, border-right-style, border-top-style, and border-bottom-style. This allows for more customized and complex border designs.

What happens if I only define border-left-style without color or width?

If only the border-left-style is defined without specifying the width or color, the border may not be visible because a valid color and width are required to render the border. Ensure you define all necessary properties.

How does border-left-style work with the border shorthand property?

You can define the left border style along with color and width using the border shorthand, like border-left: 2px dashed #000;. This sets the width, style, and color in one line, simplifying your CSS.

What are some creative uses of border-left-style?

Border-left-style is commonly used for adding vertical decorative lines in layouts, creating emphasis in lists, or adding visual separation in sidebars. Combining different border styles can create visually interesting designs for dividers and navigation menus.