W3docs
en
Log in

CSS border-left Property

Use CSS border-left property for defining the width, line style, color of the left border of an HTML element. See property values and styling tricks with examples.

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 Valuemedium none currentColor
Applies toAll elements. It also applies to ::first-letter.
InheritedNo
AnimatableYes. The color and width of the border are animatable.
VersionCSS1
DOM Syntaxobject.style.borderLeft = "1px solid black";

Syntax

Syntax of border-left

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

Example of the border-left property:

Example of CSS border-left Property with solid value

<!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>
Try it Yourself »

Result

CSS border-left Property

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

Example of CSS border-left Property with dotted, double and solid values

<!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>
Try it Yourself »

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:

Example of CSS border-left Property with ridge value

<!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>
Try it Yourself »

Values

ValueDescription
border-left-widthSets the left border width of an element. The default value is "medium". Required value.
border-left-styleSets the line style of the left border of an element. The default value is "none". Required value.
border-left-colorSets the color of the left border of an element. The default value is the current color of the text.
initialSets the property to its default value.
inheritInherits the property from its parent element.

Practice

Practice

What does the border-left property do in CSS?