border-bottom
Sets the bottom border. Most used directional border for list separators, active tab indicators, section dividers.
Class List
| Class | CSS | Description |
|---|---|---|
bb0 | border-bottom: 0 | Remove bottom border |
bb1pxsolidDDDDDD | border-bottom: 1px solid #DDDDDD | 1px light gray solid |
bb1pxsolid27272A | border-bottom: 1px solid #27272A | 1px dark solid (separator) |
bb2pxsolid27272A | border-bottom: 2px solid #27272A | 2px dark solid (header separator) |
bb2pxsolid6366F1 | border-bottom: 2px solid #6366F1 | 2px indigo solid (active tab) |
bb1pxdashed999999 | border-bottom: 1px dashed #999999 | 1px gray dashed |
bb3pxsolidFF0000 | border-bottom: 3px solid #FF0000 | 3px red solid (error) |
Pattern
bb{크기}{단위}{스타일}{HEX6}Combine width, unit, style, color (6-digit HEX) in order.
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">Part | Description | Example |
|---|---|---|
| bb | border-bottom prefix | bb |
| {크기} | Border width number | 1, 2, 3 |
| {단위} | Unit (px, etc.) | px |
| {스타일} | solid, dashed, dotted, double | solid |
| {HEX6} | 6-digit HEX color code | 27272A |
Visual Comparison
Visually compares border-bottom classes.
bb0 (remove) — bb0
Content area
1px solid dark — bb1pxsolid27272A
Content area
2px solid dark — bb2pxsolid27272A
Content area
2px solid indigo — bb2pxsolid6366F1
Content area
1px dashed — bb1pxdashed999999
Content area
Practical Patterns
border-bottom is most commonly used as a list item separator.
List item separator
List item 1
List item 2
List item 3 (last, no border)
Active tab indicator
Table header separator (bb2pxsolid27272A)
| <tr> <th class="tal py12px px16px bb2pxsolid27272A cA1A1AA fw600">Name | Role |
|---|---|
| 홍길동 | 개발자 |
| 김영희 | 디자이너 |
Usage Examples
<!-- List item divider -->
<div class="bb1pxsolid27272A py16px">Item 1</div>
<div class="bb1pxsolid27272A py16px">Item 2</div>
<div class="py16px">Item 3 (Last)</div>
<!-- Tab active indicator -->
<div class="df bb1pxsolid27272A">
<button class="py12px px2rem bb2pxsolid6366F1 cFAFAFA bn bg0F0F17 cp">Active</button>
<button class="py12px px2rem bb0 c71717A bn bg0F0F17 cp">Inactive</button>
</div>
<!-- Remove bottom border -->
<td class="bb0">Cell without border</td>
<!-- Section bottom divider -->
<section class="bb1pxsolid27272A pb2rem mb2rem">
<h2>Section Title</h2>
<p>Separated from next section by bottom border</p>
</section>Responsive
Combine with media query prefixes to change bottom border by screen size.
<!-- Bottom divider only on desktop -->
<div class="bb1pxsolid27272A sm-bb0 pb16px">
Bottom border on desktop only
</div>
<!-- Add divider on mobile -->
<div class="bb0 sm-bb1pxsolid27272A pb16px">
Bottom border only below 768px
</div>Tips & Notes
Separator pattern: bb1pxsolid27272A
Most used separator in dark themes. Use bb1pxsolid27272A for list items, table rows, section dividers.
Handling last item
If last item's bottom border is unnecessary, apply bb0 or omit the class.
Use bb2pxsolid for table headers
Use bb2pxsolid27272A with 2px for clear header-body separation.