border-left
Sets the left border. Most commonly used as left accent border for blockquotes, alert cards, tip boxes.
Class List
| Class | CSS | Description |
|---|---|---|
bl0 | border-left: 0 | Remove left border |
| border-left: 1px solid #27272A | 1px dark solid |
| border-left: 3px solid #6366F1 | 3px indigo solid (blockquote) |
| border-left: 4px solid #6366F1 | 4px indigo solid (info card) |
| border-left: 4px solid #34D399 | 4px green solid (success card) |
| border-left: 4px solid #FBBF24 | 4px yellow solid (warning card) |
| border-left: 4px solid #EF4444 | 4px red solid (error card) |
Pattern
bl{size}{unit}{style}{HEX6}Combine width, unit, style, color (6-digit HEX) in order.
| Part | Description | Example |
|---|---|---|
| bl | border-left prefix | bl |
| {size} | Border width number | 3, 4 |
| {unit} | Unit (px, etc.) | px |
| {style} | solid, dashed, dotted, double | solid |
| {HEX6} | 6-digit HEX color code | 6366F1 |
Visual Comparison
Visually compares border-left classes.
bl0 (remove) — bl0
No left border
3px solid indigo (blockquote) — pl16px
Blockquote left accent
4px solid indigo (info) —
Info alert card
4px solid green (success) —
Success alert card
4px solid yellow (warning) —
Warning alert card
4px solid red (error) —
Error alert card
Practical Patterns
Left border is most used as color accent in alert cards, blockquotes, tip boxes.
Alert card variants
Info
bl4pxsolid6366F1 - Indigo accent
Success
bl4pxsolid34D399 - Green accent
Warning
bl4pxsolidFBBF24 - Yellow accent
Error
bl4pxsolidEF4444 - Red accent
Blockquote style
"Good design is as little design as possible."
- Dieter Rams
Documentation tip box (used on this site)
Tip title
This site's tip cards also use bl4pxsolid6366F1.
Usage Examples
<!-- Tip card (Info) -->
<div class="bg0F0F17 b1pxsolid27272A br8px p2rem">
<p class="fs14px cFAFAFA fw600 mb4px">Tip</p>
<p class="fs14px c71717A">Left indigo accent highlights info.</p>
</div>
<!-- Warning card -->
<div class="bg0F0F17 b1pxsolid27272A br8px p2rem">
<p class="fs14px cFAFAFA fw600 mb4px">Caution</p>
<p class="fs14px c71717A">Left yellow accent indicates a warning.</p>
</div>
<!-- Blockquote -->
<blockquote class="pl16px py8px">
<p class="fsi cFAFAFA">"Simplicity is the ultimate sophistication."</p>
<cite class="fs12px c71717A mt4px db">- Leonardo da Vinci</cite>
</blockquote>
<!-- Remove left border -->
<td class="bl0">Cell without left border</td>Responsive
Combine with media query prefixes to control left border by screen size.
<!-- Remove accent border on mobile -->
<div class="sm-bl0 p16px">
Left accent on desktop only
</div>
<!-- Switch to top border on mobile -->
<div class="sm-bl0 sm-bt4pxsolid6366F1 p16px">
Desktop: left accent → Mobile: top accent
</div>Tips & Notes
Accent border = bl4pxsolid + color
Standard left accent width is 3~4px. Change color for semantic variants: info (indigo), success (green), warning (yellow), error (red).
Best for blockquotes
Use bl3pxsolid6366F1 pl16px on <blockquote> for clean blockquote style.
Use with padding-left
Left border makes text touch the border. Use pl16px or p16px for spacing.