CSS border-left-style Property

Beginner
5 min read
Updated: Oct 2026
3 examples
Live preview
CSS border-left-style property switching the physical left border between solid, dashed, and dotted lines
Definition

Definition and Usage

The border-left-style property sets the line style of an element’s physical left border. You can also set it through the shorthands border-left or border-style.

The initial value is none, so nothing draws until you pick a visible style such as solid or dashed. Width and color come from border-left-width and border-left-color (color defaults to currentColor). It is not inherited. Unlike border-inline-start-style, it does not flip in RTL layouts.

Baseline · Widely available.

Not deprecated and not experimental. Corner joins between different styles are left undefined by the spec, so mixed styles at corners can look slightly different across browsers.

Syntax

CSS Syntax

syntax.css
border-left-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

One keyword. Everyday choices are solid, dashed, and dotted.

Values

Property Values

ValueDescriptionTry it
solidA continuous line. Most common visible styleTry it
dashedA series of short dashesTry it
dottedA series of dotsTry it
doubleTwo parallel lines. Needs enough width to show bothTry it
grooveA carved 3D look. Pair with a thicker widthTry it
noneNo left border. Initial valueTry it
initialSets this property to its default value, noneTry it
inheritInherits this property from the parent elementTry it

Also available: hidden, ridge, inset, and outset. On a normal box, hidden looks like none.

Approach

How to Use border-left-style

Pick a visible style first, then set width and color if you need them.

  1. Choose the element that should show a line on the physical left side.
  2. Set border-left-style to solid, dashed, dotted, or another keyword.
  3. Add border-left-width when you want a specific thickness. Omit it to use medium.
  4. Optionally set border-left-color, or use the border-left shorthand for all three.
PieceRequired?Role
Style keywordYes (to show a line)Without it, the left border stays none
WidthOptionalDefaults to medium. Use more for double and 3D styles
ColorOptionalDefaults to currentColor
Physical left onlyBy designDoes not move with writing mode or direction
Try it

Live Preview

Width and color stay fixed. Only border-left-style changes.

The left edge is 6px so double and groove have room to show.

Box

border-left-style: solid

Code

CSS Examples

Each snippet focuses on border-left-style. Width is only there so the style can show. Use Try It Yourself for a live editor.

Example 1 — Solid Left Border

A continuous line on the physical left edge.

CSS
<style>
  div {
    border-left-width: 4px;
    border-left-style: solid;
    padding: 10px;
  }
</style>

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

How It Works

  1. Give it thickness. border-left-width: 4px makes room for a visible edge.
  2. Choose the style. solid draws a continuous line. This is the property that makes the border appear.
  3. Color defaults. With no color set, the line uses currentColor (the text color).
  4. One side only. Top, right, and bottom stay without a border from these rules.

Example 2 — Dashed Left Border

Short dashes along the left edge for a lighter accent.

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

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

How It Works

  1. Keep a clear width. 4px makes the dashes easy to see.
  2. Swap the style. dashed replaces the solid stroke with short gaps.
  3. Set a color. Blue paints those dashes. Style still decides the pattern.
  4. Same longhand trio. Width, style, and color together match what border-left can set in one line.

Example 3 — Double Left Border

Two parallel lines. Give the border enough width so both show.

CSS
<style>
  div {
    border-left-width: 6px;
    border-left-style: double;
    border-left-color: #0f766e;
    padding: 10px;
  }
</style>

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

How It Works

  1. Choose double. The browser draws two lines with a gap between them.
  2. Give it room. 6px is wide enough for both lines and the space between.
  3. Set the color. Teal fills both lines on the left edge.
  4. Thin widths struggle. At 1px or 2px, double often looks like a single line.

Edge Cases & Pitfalls

If the left style does not show, one of these is usually why.

none

The default draws nothing

The initial value is none. Width and color alone will not create a line until you set a visible style.

width

double and 3D styles need thickness

double, groove, ridge, inset, and outset look weak or flat at 1px. Use a larger border-left-width.

order

A later shorthand can wipe the style

border-left: 4px #2563eb after your style resets style to none. Put the style in the shorthand, or set border-left-style after it.

RTL

Physical left does not flip in RTL

The style stays on the left even with direction: rtl. Use border-inline-start-style for a logical leading edge.

table

hidden matters mainly in tables

On a normal box, hidden looks like none. With border-collapse: collapse, hidden can win conflicting table border styles.

Compatibility

Browser Support

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

✓ Baseline · Widely available

border-left-style

Supported in all modern browsers and Internet Explorer for the standard line-style keywords.

100% Line styles
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-style Widely supported

Bottom line: Safe everywhere for none, solid, dashed, dotted, double, and the 3D keywords. Corner joins between mixed styles are unspecified. It is not a runtime API.

Remember

Key Takeaways

  • Role: choose how the physical left border looks — solid, dashed, dotted, and more.
  • Initial value: none. No visible left border until you set a style.
  • Needs width: especially for double and 3D styles. Color defaults to currentColor.
  • Physical: always the left side. Use border-inline-start-style for logical leading edges.

One line: border-left-style makes the left edge visible — pick a keyword other than none, then tune width and color.

Frequently Asked Questions

It sets the line style of the physical left border only, such as solid, dashed, or dotted. Width and color come from other properties or from a shorthand.
The initial value is none, so no left border appears until you choose a visible style.
none and hidden draw nothing. You also need a non-zero border-left-width. Color defaults to currentColor if you omit it.
Both look the same on a normal box. hidden mainly matters in tables with border-collapse: collapse, where it can win border conflicts.
border-left-style always styles the physical left edge. border-inline-start-style follows writing direction, so it can move to the right in RTL layouts.
It is Baseline and widely available in all modern browsers and Internet Explorer. It is a browser CSS property, not a Node.js feature.

Next: border-left-width

Learn how thick the physical left border should be.

border-left-width 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-left-color Property CSS border-left-width Property