AAtomic CSS

border-bottom-width

Sets only the bottom border thickness. Used for table row separators, active tab indicators, underline effects.

Class List

Pattern-based class. Use bbw{N}px format.

ClassCSSDescription
bbw1pxborder-bottom-width: 1pxBottom border thickness 1px
bbw2pxborder-bottom-width: 2pxBottom border thickness 2px
bbw3pxborder-bottom-width: 3pxBottom border thickness 3px
bbw4pxborder-bottom-width: 4pxBottom border thickness 4px

Visual Comparison

Visually compares various border-bottom-width values.

1px — bbw1px

1px

2px — bbw2px

2px

3px — bbw3px

3px

4px — bbw4px

4px

Usage Examples

<!-- 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>

<!-- Full border + emphasized bottom -->
<div class="b1pxsolid27272A bbw3px p2rem br8px cFAFAFA">
  Thicker border only at bottom
</div>

Tips &amp; Notes

Tab indicator pattern

Apply bbw2px to active tabs, no border on inactive, for clean tab UI.

border-style required

bbw{N}px alone won't show border. Use with border shorthand or style class.

border-widthborderborder-radius