border-left-width
Sets only the left border thickness. Used for blockquote left bars, category markers, side indicators.
Class List
Pattern-based class. Use blw{N}px format.
| Class | CSS | Description |
|---|---|---|
blw1px | border-left-width: 1px | Left border thickness 1px |
blw2px | border-left-width: 2px | Left border thickness 2px |
blw3px | border-left-width: 3px | Left border thickness 3px |
blw4px | border-left-width: 4px | Left border thickness 4px |
Visual Comparison
Visually compares various border-left-width values.
1px — blw1px
1px
2px — blw2px
2px
3px — blw3px
3px
4px — blw4px
4px
Usage Examples
<!-- Blockquote left bar -->
<blockquote class="blw4px bl1pxsolid6366F1 pl16px py8px cA1A1AA fs14px lh1-7">
Good code is its own best documentation.
</blockquote>
<!-- Category indicators -->
<div class="blw4px bl1pxsolid34D399 pl12px py4px cFAFAFA fs14px mb8px">Success</div>
<div class="blw4px bl1pxsolidFBBF24 pl12px py4px cFAFAFA fs14px mb8px">Warning</div>
<div class="blw4px bl1pxsolidEF4444 pl12px py4px cFAFAFA fs14px">Error</div>
<!-- Full border + emphasized left only -->
<div class="b1pxsolid27272A blw4px p2rem br8px cFAFAFA">
Thicker border only on left
</div>Tips & Notes
Blockquote pattern
Combining blw4px with color creates blockquote/alert left bars. Shorthand bl4pxsolid6366F1 is more convenient.
border-style required
blw{N}px alone won't show border. Use with border shorthand or style class.