CSS border-left property

CSS border-left property is used to specify left side border width, style, and color of a HTML Element.

CSS border-left property is a shorthand to specify border-left-width, border-left-style, and border-left-color as a single property.

The syntax to specify border-left is

</>
Copy
border-left: border-left-width border-left-style border-left-color;

where

PropertyMandatory/
Optional		Examples
border-left-widthOptional1px, 2em
border-left-styleMandatorysolid, dotted, double
border-left-colorOptional#555, red, #55fffcdd

Examples

border-left: 5px solid red;

In the following example, we set a border-left for <h1> element, with border-left-width of 5px, border-left-style of solid, and border-left-color of red.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        h1 {
            border-left: 5px solid red;
        }
    </style>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

border-left: 5px solid;

In the following example, we set a border-left for <h1> element, with border-left-width of 5px, and border-left-style of solid. We do not specify any value for border-left-color.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        h1 {
            border-left: 5px solid;
        }
    </style>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

border-left: solid;

In the following example, we set a border-left for <h1> element, with border-left-style of solid. We do not specify any width and color for the border-left.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        h1 {
            border-left: solid;
        }
    </style>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

div border-left

In the following example, we set a border-left for <div> element, with border-left value of 5px solid #00F.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        div {
            width: 200px;
            height: 100px;
            background: #CCC;
            border-left: 5px solid #00F;
        }
    </style>
</head>
<body>
    <div>Hello World</div>
</body>
</html>

Conclusion

In this CSS Tutorial, we learned about border-left property, and how to use this property for HTML Elements, with examples.