CSS border-left Property

What You’ll Learn

The border-left property sets the width, style, and color of the physical left border in one shorthand rule.

Definition and Usage

The border-left CSS property is a physical shorthand that sets the border on the left side of an element. It combines border-left-width, border-left-style, and border-left-color in one declaration.

Unlike logical properties such as border-inline-start, border-left always targets the physical left edge — even in RTL text. That makes it straightforward for classic LTR layouts, quote bars, and left accent dividers.

📝 Syntax

border-left accepts border width, style, and color like other border shorthands:

selector {
  border-left: width style color;
}

Basic Example

.box {
  border-left: 5px solid red;
}

Syntax Rules

• Sets width, style, and color for the left border side only.
• Omitted components use initial values: medium, none, currentcolor.
• Any valid border width, style, and color values are accepted.
• Always affects the physical left side, regardless of direction or writing-mode.
• Use longhands when you need to set only width, style, or color on the left side.

Default Value

The default value of border-left is medium none currentcolor. No visible border appears until you set a non-none style and a width greater than zero.

💎 Property Values

Common Value Types

Left Border and Text Direction

border-left always draws on the physical left side. Text direction does not move the border — compare with logical properties when building RTL layouts.

border-left vs related properties

Examples Gallery

Try border-left with solid red borders, quote accents, RTL comparison, and dashed styles.

<style>
  .box {
    border-left: 5px solid red;
    padding: 10px;
  }
</style>

<div class="box">
  This box has a 5px solid red left border.
</div>

blockquote {
  margin: 0;
  padding: 0.75rem 1rem;
  border-left: 4px solid #2563eb;
  background: #eff6ff;
  color: #334155;
}

<style>
  .rtl-box {
    direction: rtl;
    padding: 0.75rem 1rem;
    border-left: 4px solid #059669;
    background: #ecfdf5;
  }
</style>

<div class="rtl-box">
  حد فيزيكي على اليسار
</div>

.note {
  padding: 0.75rem 1rem;
  border-left: 3px dashed #7c3aed;
  background: #faf5ff;
}

💡 Best Practices