The border-left-style property defines the line style of the left border on an element. It is useful when you want the left edge styled differently from the other sides.
01
Left Style
Physical left edge.
02
solid
Continuous line.
03
dashed / dotted
Soft dividers.
04
3D Styles
groove, ridge, inset.
05
none Default
No border by default.
06
Longhand
Part of border-left.
Fundamentals
Definition and Usage
The border-left-style CSS property specifies the style of the left border of an element. This property allows you to control the appearance of the left edge, enhancing design and visual hierarchy on your web pages.
By choosing different border styles such as solid, dashed, or dotted, you can create a variety of effects for quote bars, callouts, navigation accents, and left-edge highlights.
💡
Beginner Tip
A border only appears when border-left-style is not none. Pair it with border-left-width and border-left-color, or use border-left: 2px solid #000; as shorthand.
Foundation
📝 Syntax
The syntax for border-left-style is straightforward:
The style value refers to the border line type, such as solid, dashed, or dotted.
Syntax Rules
The initial value is none, which hides the left border.
Common values include solid, dashed, and dotted.
3D-style keywords include groove, ridge, inset, and outset.
Pair with width and color longhands, or use the border-left shorthand.
Related longhands: border-left-width and border-left-color.
Cheat Sheet
⚡ Quick Reference
Question
Answer
Initial value
none
Applies to
Left border style only
Inherited
No
Animatable
No
Common use
Quote bars, left accents, callout dividers
Defaults
Default Value
The default value of border-left-style is none, meaning no left border is displayed until you choose a visible style.
Reference
💎 Property Values
The border-left-style property accepts standard CSS border style keywords.
Value
Description
none
No border is displayed
solid
A single solid line
dashed
A series of dashed lines
dotted
A series of dotted lines
double
Two solid lines with space between them
groove
A 3D grooved border that looks carved in
ridge
A 3D ridged border that looks raised out
inset
A 3D inset border that looks embedded
outset
A 3D outset border that looks raised
hidden
Same as none, but can still affect table layout
previewsolid
previewdotted
previewdashed
previewdouble
previewgroove
previewridge
previewinset
previewoutset
Scope
Left Border Style and Text Direction
border-left-style always styles the physical left side. Text direction does not move the border — compare with border-inline-start-style when building RTL layouts.
Leading edge accents that follow text direction in RTL
border-left
Width, style, and color on the left side
Setting the full left border in one rule
Preview
👀 Live Preview
A box with a solid blue left border style:
This element has a solid left border style.
Uses border-left-style: solid; with width and color longhands.
Hands-On
Examples Gallery
Try border-left-style with solid, dashed, dotted, and double left borders.
📚 Basic Left Border Styles
Set the left border style with width and color longhands so the line is visible.
Example 1 — Solid, Dashed, and Dotted Left Borders
Apply different styles to the left border of div elements, matching the reference tutorial.
border-left-style-basic.html
<style>.solid-border{border-left-style:solid;border-left-width:4px;border-left-color:blue;padding:0.75rem 1rem;margin-bottom:0.75rem;}.dashed-border{border-left-style:dashed;border-left-width:4px;border-left-color:green;padding:0.75rem 1rem;margin-bottom:0.75rem;}.dotted-border{border-left-style:dotted;border-left-width:4px;border-left-color:red;padding:0.75rem 1rem;}</style><divclass="solid-border">This div has a solid left border.</div><divclass="dashed-border">This div has a dashed left border.</div><divclass="dotted-border">This div has a dotted left border.</div>
dashed breaks the left border into short segments, which works well for subtle callout accents.
Example 4 — border-left-style in RTL
In RTL text, border-left-style stays on the physical left — unlike border-inline-start-style.
border-left-style-rtl.html
<style>.rtl-box{direction:rtl;border-left-style:solid;border-left-width:4px;border-left-color:#059669;padding:0.75rem 1rem;background:#ecfdf5;}</style><divclass="rtl-box">
حد فيزيكي على اليسار
</div>
RTL changes text flow but not the physical left edge. For a leading accent in RTL, use border-inline-start-style instead.
🧠 How border-left-style Works
1
You choose a line style
Set solid, dashed, dotted, or another border style keyword.
Style rule
2
You add width and color
Pair the style with border-left-width and border-left-color.
Border setup
3
The browser draws the left edge
Only the physical left border uses that line style. Top, right, and bottom sides stay unchanged.
Left edge
=
⋯
Styled left accent
Your element gets a clear visual separator on the physical left edge.
Compatibility
Universal Browser Support
The border-left-style property is supported in all major browsers, including Chrome, Firefox, Safari, Edge, Opera, and Internet Explorer. It is one of the most reliable CSS border properties.
✓ Baseline · All browsers
Reliable left border styles on every platform
Chrome, Firefox, Safari, Edge, and Opera all support border-left-style consistently.
100%Universal support
Google Chrome69+ · Desktop & Mobile
Full support
Mozilla Firefox66+ · Desktop & Mobile
Full support
Apple Safari12.1+ · macOS & iOS
Full support
Microsoft Edge79+ · Chromium
Full support
Opera56+ · Modern versions
Full support
border-left-style property100% supported
Bottom line: Use border-left-style freely in any project. It works consistently across all browsers.
Wrap Up
Conclusion
The border-left-style property provides a variety of options for styling the left border of an element, from simple lines to more complex effects like double and 3D styles.
By experimenting with different style keywords, you can enhance the visual appeal and user experience of your website with quote bars, callouts, and decorative left accents.
Use solid for clear quote bars and left-edge accents
Try dashed or dotted for softer callout dividers
Use border-inline-start-style when the accent must follow text direction in RTL
Pair style with width and color longhands for predictable results
Use the border-left shorthand when setting all three parts
Give double enough width (usually 3px or more) to show two lines
❌ Don’t
Leave the value at none and expect a visible border
Expect border-left-style to move to the right in RTL layouts
Use heavy 3D styles everywhere in modern flat UI
Mix physical and logical style properties without a clear reason
Forget width when using thin styles like dotted or dashed
Summary
Key Takeaways
Knowledge Unlocked
Five things to remember about border-left-style
Use these points when styling the physical left edge.
5
Core concepts
⋯01
Left Style
Physical left edge.
Purpose
—02
none Default
Hidden by default.
Default
📝03
solid / dashed
Most common styles.
Values
⚙️04
Needs Width
Pair with longhands.
Setup
🔄05
One Edge Only
Other sides unchanged.
Scope
❓ Frequently Asked Questions
The border-left-style property sets the line style of the border on the physical left side of an element only.
The initial value is none, which means no left border is displayed until you set a visible style such as solid or dashed.
If the value is none, no border appears. You also need border-left-width greater than zero and usually a color, or use the border-left shorthand.
border-left-style always styles the physical left edge. border-inline-start-style follows writing direction, so it moves to the right in RTL layouts.
solid, dashed, and dotted are the most common for quote bars and left accents. double, groove, ridge, inset, and outset create stronger visual effects.
