border-top-width
Sets only the top border thickness. Used for section dividers, top tab indicators, card top accents.
Class List
Pattern-based class. Use btw{N}px format.
| Class | CSS | Description |
|---|---|---|
btw1px | border-top-width: 1px | Top border thickness 1px |
btw2px | border-top-width: 2px | Top border thickness 2px |
btw3px | border-top-width: 3px | Top border thickness 3px |
btw4px | border-top-width: 4px | Top border thickness 4px |
Visual Comparison
Visually compares various border-top-width values.
1px — btw1px
1px
2px — btw2px
2px
3px — btw3px
3px
4px — btw4px
4px
Usage Examples
<!-- 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>
<!-- Full border + emphasized top only -->
<div class="b1pxsolid27272A btw3px p2rem br8px cFAFAFA">
Thicker border only at top
</div>Tips & Notes
border-style required
btw{N}px alone won't show border. border-style defaults to none. Use with border shorthand or style class.
Combine with border shorthand
Set full border then change only top thickness. E.g.: b1pxsolid27272A btw3px to emphasize top.