CSS border-left Property

Beginner
6 min read
Updated: Oct 2026
3 examples
Live preview
CSS border-left property drawing a line on the physical left edge of a box
Definition

Definition and Usage

The border-left property is a shorthand that sets border-left-width, border-left-style, and border-left-color on the physical left edge only.

A border appears only when the style is not none. Width defaults to medium and color to currentColor when omitted. For every side at once, use border. For a leading edge that follows text direction, use border-inline-start.

Baseline · Widely available.

Not deprecated and not experimental. The border-left shorthand has been supported across browsers since the early days of CSS.

Syntax

CSS Syntax

syntax.css
border-left: <line-width> || <line-style> || <color> | initial | inherit;

Write one to three values, in any order. The usual order is width, style, then color: border-left: 4px solid black;.

Values

Property Values

ValueDescriptionTry it
<line-width>Thickness: a length, or thin, medium, thick. Default mediumTry it
solidA continuous left line. Most common styleTry it
dashedA series of short dashes on the left edgeTry it
dottedA series of dots on the left edgeTry it
doubleTwo parallel left lines. Needs enough width to show bothTry it
<color>Left border color. Default is currentColorTry it
noneNo left border. Initial style. Width and color alone will not showTry it
initialResets to the initial left border (style none)Try it
inheritInherits this property from the parent elementTry it
Approach

How to Use border-left

Pick a style first so the left line is visible, then set width and color as needed.

  1. Choose the element that needs a line on its physical left edge.
  2. Set a style such as solid, dashed, or dotted. Without a style, nothing draws.
  3. Add a width and color when you want them. Omit them to use medium and currentColor.
  4. Leave the other sides alone — border-left does not change top, right, or bottom.
PieceRequired?Role
StyleYes (to show a line)Without it, the left border stays none and invisible
WidthOptionalDefaults to medium if omitted
ColorOptionalDefaults to currentColor if omitted
Left edge onlyBy designOther sides keep whatever they already have
Try it

Live Preview

Change the border-left shorthand and watch only the left edge update.

Style is required. Width and color are optional parts of the same shorthand.

Left edge

border-left: 4px solid #0f172a

Code

CSS Examples

Each snippet focuses on the border-left shorthand. Use Try It Yourself for a live editor.

Example 1 — Solid Left Border

Set width, style, and color on the left edge in one declaration.

CSS
<style>
  div {
    border-left: 4px solid #0f172a;
    padding: 12px;
  }
</style>

<div>Solid left border</div>
Try It Yourself

How It Works

  1. Target the left edge. border-left never paints top, right, or bottom by itself.
  2. Set the style. solid draws a continuous line. Without a style, nothing appears.
  3. Set the width. 4px is the thickness of that left line.
  4. Set the color. #0f172a paints the stroke. All three values share one shorthand.

Example 2 — Dashed Left Border

Use a dashed style with a clear color for a soft side accent.

CSS
<style>
  div {
    border-left: 4px dashed #2563eb;
    padding: 12px;
  }
</style>

<div>Dashed left border</div>
Try It Yourself

How It Works

  1. Keep the same shorthand shape. Width, style, and color still share one property.
  2. Swap the style. dashed replaces the solid line with short gaps.
  3. Color the dashes. Blue applies only to the left edge.
  4. Other sides stay untouched. Top, right, and bottom keep their previous borders (or none).

Example 3 — Double Left Border

Draw two parallel lines on the left. Give the border enough width so both show.

CSS
<style>
  div {
    border-left: 8px double #0f766e;
    padding: 12px;
  }
</style>

<div>Double left border</div>
Try It Yourself

How It Works

  1. Choose double. The browser draws two lines with a gap between them.
  2. Give it room. 8px is wide enough for both lines and the space between.
  3. Set the color. Teal fills both left lines.
  4. Still left-only. The shorthand applies the effect to the physical left edge alone.

Edge Cases & Pitfalls

If the left border disappears or looks wrong, check these first.

style

No style means no left border

border-left: 4px #000 still looks empty because style defaults to none. Always include solid or another style keyword.

reset

The shorthand resets omitted parts

Writing border-left: thick green after border-left-style: dotted resets style to none. Include the style in the shorthand, or set longhands after it.

logical

Physical left is not always “start”

border-left stays on the screen’s left edge. In RTL layouts, use border-inline-start when the line should follow the leading text edge instead.

size

Borders add to the box by default

With the default content-box sizing, a left border grows the element’s outer width. Use box-sizing: border-box to keep width inclusive of the border.

sides

Need every side the same?

Use border instead. Reach for border-left when only the left edge should change.

Compatibility

Browser Support

border-left is a browser CSS property for the box model. Node.js, Deno, and Bun do not apply it.

✓ Baseline · Widely available

border-left

Supported in all modern browsers and Internet Explorer. The side shorthand has been part of CSS since the earliest versions.

100% Universal support
Google Chrome All versions
Full support
Mozilla Firefox All versions
Full support
Apple Safari All versions
Full support
Microsoft Edge All versions
Full support
Opera All versions
Full support
Samsung Internet All versions
Full support
Internet Explorer All versions
Full support
border-left Widely supported

Bottom line: Safe everywhere for left-edge width, style, and color. Prefer the shorthand when the left side is the only edge you need. It is not a runtime API.

Remember

Key Takeaways

  • Role: one shorthand for width, style, and color on the physical left edge.
  • Style required: initial style is none. Width or color alone will not draw.
  • Physical edge: always the screen left — not writing-direction aware like border-inline-start.
  • Shorthand reset: omitted parts fall back to defaults, including style none.

One line: use border-left when only the left edge needs a border — and always include a style keyword.

Frequently Asked Questions

It is a shorthand that sets border-left-width, border-left-style, and border-left-color on the physical left edge in one declaration.
A visible style is required. The initial style is none, so width or color alone will not draw a line. Use solid, dashed, dotted, or another style.
You can write width, style, and color in any order. The common pattern is width then style then color, for example border-left: 4px solid black.
border-left always targets the physical left edge. border-inline-start follows writing direction, so in RTL text it usually maps to the right side.
Yes. Like other border shorthands, omitted parts reset to their defaults. If you omit style, it becomes none and the border disappears.
It is Baseline Widely available and works in all modern browsers and Internet Explorer. It is a browser CSS property, not a Node.js feature.

Next: border-left-color

Set only the color of the physical left border.

border-left-color tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

CSS border-inline-width Property CSS border-left-color Property