CSS border-left Property

The CSS border-left property is used to set the width, line style and color of the left border of elements.

It is a shorthand property for specifying the following values:


These three values of the shorthand property can be specified in any order, and one or two of them can be missed.

If there isn't a specified color, the value will be taken from the color property. If the color property is not defined, it will take the current color by default.

If the width is not specified, it will take the medium size of the element.

Initial Value medium none currentColor
Applies to All elements. It also applies to ::first-letter.
Inherited No
Animatable Yes. The color and width of the border are animatable.
Version CSS1
DOM Syntax object.style.borderLeft = "1px solid black";

Syntax

border-left: border-width border-style border-color | initial | inherit;

Example of the border-left property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border-left: 3px solid #1c87c9;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-left example</h2>
    <div> This is a simple example for the border-left property.</div>
  </body>
</html>

Result

CSS border-left Property

Example of the border-left property applied to different elements:

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1,
      p,
      div {
        padding: 10px;
      }
      h1 {
        border-left: 5px solid #8ebf42;
      }
      p {
        border-left: 4px dotted #1c87c9;
      }
      div {
        border-left: thick double #666;
      }
    </style>
  </head>
  <body>
    <h1>A heading with a solid green left border</h1>
    <p>A heading with a dotted blue left border.</p>
    <div>A div element with a thick double left border.</div>
  </body>
</html>

Create a box with the <div> element and set a background-color for your box and left border.

Example of the border-left property with the <div> element:

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        border-left: 20px ridge #8ebf42;
        background-color: #ccc;
        height: 100px;
        width: 200px;
        font-weight: bold;
        text-align: center;
        padding: 3px;
      }
    </style>
  </head>
  <body>
    <div>
      <p>This box has a ridge border on the left side.</p>
    </div>
  </body>
</html>

Values

Value Description
border-left-width Sets the left border width of an element. The default value is "medium". Required value.
border-left-style Sets the line style of the left border of an element. The default value is "none". Required value.
border-left-color Sets the color of the left border of an element. The default value is the current color of the text.
initial Sets the property to its default value.
inherit Inherits the property from its parent element.

Browser support

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 3.5+

Practice Your Knowledge

What does the border-left property do in CSS?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?