border-width
Sets border thickness. Used with border-style and border-color, or in border shorthand.
Class List
Pattern-based class. Use bw{N}px format.
| Pattern | CSS | Description |
|---|---|---|
bw{N}px | border-width: {N}px | All-direction border thickness |
btw{N}px | border-top-width: {N}px | Top border thickness |
brw{N}px | border-right-width: {N}px | Right border thickness |
bbw{N}px | border-bottom-width: {N}px | Bottom border thickness |
blw{N}px | border-left-width: {N}px | Left border thickness |
Visual Comparison
Visually compares border-width values.
1px — bw1px
2px — bw2px
3px — bw3px
4px — bw4px
Directional border-width
Apply border thickness to specific directions.
top — btw3px
right — brw3px
bottom — bbw3px
left — blw3px
Commonly Used Values
| Class | CSS | Usage |
|---|---|---|
bw1px | border-width: 1px | General borders, dividers |
bw2px | border-width: 2px | Emphasis borders, active state |
bbw2px | border-bottom-width: 2px | Active tab indicator |
blw4px | border-left-width: 4px | Blockquotes, category indicator bar |
btw3px | border-top-width: 3px | Card top accent |
Class Details
bw{N}pxborder-width
Sets all-direction border thickness. border-style required for visibility. Used for individual thickness adjustment.
<!-- Set border width for all sides -->
<div class="bw2px b1pxsolid6366F1 p2rem br8px cFAFAFA">
border-width: 2px (Full)
</div>
<!-- Change width on hover -->
<button class="bw1px hover-bw2px b1pxsolid27272A py8px px16px br8px bg18181B cFFFFFF cp tall200msease">
Hover me
</button>btw{N}pxborder-top-width
Sets top border thickness only. For section dividers, top tab indicators.
<!-- Card top accent -->
<div class="btw3px bt1pxsolid6366F1 p2rem bg18181B br4px cFAFAFA">
3px top indicator
</div>
<!-- Active tab top indicator -->
<div class="df gap0px">
<div class="btw2px bt1pxsolid6366F1 py8px px16px bg18181B cFAFAFA">Active tab</div>
<div class="py8px px16px bg0F0F17 c71717A">Inactive tab</div>
</div>brw{N}pxborder-right-width
Sets right border thickness only. For sidebar dividers, vertical dividers.
<!-- Sidebar right divider -->
<div class="df">
<aside class="brw1px br1pxsolid27272A p2rem w25rem cA1A1AA">
Sidebar
</aside>
<main class="p2rem fg1 cFAFAFA">
Main Content
</main>
</div>bbw{N}pxborder-bottom-width
Sets bottom border thickness only. Most used for table separators, tab indicators, underlines.
<!-- Table row bottom divider -->
<div class="bbw1px bb1pxsolid27272A py12px cFAFAFA">Row 1</div>
<div class="bbw1px bb1pxsolid27272A py12px cFAFAFA">Row 2</div>
<div class="py12px cFAFAFA">Row 3 (Last)</div>
<!-- Active tab bottom indicator -->
<div class="df gap2rem">
<div class="bbw2px bb1pxsolid6366F1 py8px cFAFAFA fw600">Active</div>
<div class="py8px c71717A">Inactive</div>
<div class="py8px c71717A">Inactive</div>
</div>blw{N}pxborder-left-width
Sets left border thickness only. For blockquote left bars, category markers.
<!-- 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>Tips & Notes
Use border shorthand classes
For width+style+color at once, b1pxsolid27272A is more convenient. Use border-width for thickness-only changes.
border-style required
bw{N}px alone won't show border. border-style defaults to none. Always use with style.
Size changes with box-sizing
Without bxzbb, border increases total size. Use bxzbb to prevent layout shifts.
Shorthand decomposition: bw internally decomposes to 4 directions. bw2px blw0 correctly overrides only border-left-width to 0.