CSS border-left-width Property

The border-left-width property in CSS is used to define the width (thickness) of the left border of an element. It controls how thick or thin the left border appears.

It accepts values like thin, medium, thick, or specific units such as px, em, etc.
The border is visible only if a border style is applied (e.g., solid, dashed).
It is commonly used with border-left-style and border-left-color for complete border styling.

Syntax:

border-left-width: medium | thin | thick | length | initial | inherit;

Property Values: medium: It has a default value. It is used to specify a medium, size of left-border.

Syntax:

border-left-width: medium;

Example: Here, we demonstrates the usage of border-left-width: medium; to set a medium-width left border on headings and paragraphs.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS border-left-width Property
    </title>
    <style>
        h1 {
            color: green;
        }

        h3 {
            border: solid green;
            border-left-width: medium;
            width: 50%;
        }
    </style>
</head>

<body>
        <h1>GeeksForGeeks</h1>
        <h2>border-left-width:medium;</h2>
        <h3>GeeksForGeeks</h3>

        <p style="border-style:dotted; 
                border-left-width:medium; 
                width:70%;">
            It is a computer science portal for geeks.
        </p>
</body>

</html>

thin property

border-left-width: thin; in CSS sets a thin width for the left border of an element, typically a hairline thickness.

Syntax:

border-left-width: thin;

Example: Here, we defines headings and a paragraph styled with thin left borders using CSS, demonstrating border-left-width: thin; for elements.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS | border-left-width Property
    </title>
    <style>
        h1 {
            color: green;
        }

        h3 {
            border: solid green;
            border-left-width: thin;
            width: 50%;
        }
    </style>
</head>

<body>

        <h1>GeeksForGeeks</h1>
        <h2>border-left-width:thin;</h2>
        <h3>GeeksForGeeks</h3>

        <p style="border-style:dotted; 
                border-left-width:thin; 
                width:70%;">
            It is a computer science portal for geeks.
        </p>

</body>

</html>

thick property

In CSS, border-left-width: thick; sets a thick width for the left border of an element, creating a visibly thicker border compared to standard or default thicknesses.

Syntax:

border-left-width: thick;

Example: Here, we sets thick left borders using border-left-width: thick; in CSS for headings and a paragraph, showcasing a visibly thicker border style.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS border-left-width Property
    </title>
    <style>
        h1 {
            color: green;
        }

        h3 {
            border: solid green;
            border-left-width: thick;
            width: 50%;
        }
    </style>
</head>

<body>

        <h1>GeeksForGeeks</h1>
        <h2>border-left-width:thick;</h2>
        <h3>GeeksForGeeks</h3>

        <p style="border-style:dotted; 
                border-left-width:thick; 
                width:70%;">
            It is a computer science portal for geeks.
        </p>

</body>

</html>

length property

In CSS, the border-left-width property specifies the width of the left border of an element, defined in pixels, ems, or other length units.

Syntax:

border-left-width: length;

Example: Here, we demonstrates CSS usage of border-left-width: 10px; for a thick left border on h3 headings and border-left-width: 5px; on a paragraph for a thinner dotted border.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS border-left-width Property
    </title>
    <style>
        h1 {
            color: green;
        }

        h3 {
            border: solid green;
            border-left-width: 10px;
            width: 50%;
        }
    </style>
</head>

<body>

    <h1>GeeksForGeeks</h1>
    <h2>border-left-width:length;</h2>
    <h3>GeeksForGeeks</h3>

    <p style="border-style:dotted; 
                border-left-width:5px; 
                width:70%;">
        It is a computer science portal for geeks.
    </p>

</body>

</html>

initial property

In CSS, initial resets a property to its default value, overriding any previously defined values within the cascading process.

Syntax:

border-left-width: initial;

Example: Here, we sets border-left-width: initial; for h3, resetting its left border to the default, while applying border-left-width: initial; to a paragraph with a dotted border.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS | border-left-width Property
    </title>
    <style>
        h1 {
            color: green;
        }

        h3 {
            border: solid green;
            border-left-width: initial;
            width: 50%;
        }
    </style>
</head>

<body>
        <h1>GeeksForGeeks</h1>
        <h2>border-left-width:initial;</h2>
        <h3>GeeksForGeeks</h3>

        <p style="border-style:dotted; 
                border-left-width:initial; 
                width:70%;">
            It is a computer science portal for geeks.
        </p>

</body>

</html>

CSS border-left-width Property

thin property

thick property

length property

initial property

Explore