border-top
Sets the top border. Remove with bt0 or specify with bt1pxsolidDDDDDD.
Class List
| Class | CSS | Description |
|---|---|---|
bt0 | border-top: 0 | Remove top border |
bt1pxsolidDDDDDD | border-top: 1px solid #DDDDDD | 1px light gray solid |
bt1pxsolid27272A | border-top: 1px solid #27272A | 1px dark solid (separator) |
bt2pxsolid6366F1 | border-top: 2px solid #6366F1 | 2px indigo solid (accent) |
bt2pxdashed000000 | border-top: 2px dashed #000000 | 2px black dashed |
bt3pxsolid34D399 | border-top: 3px solid #34D399 | 3px green solid (success) |
bt3pxsolidFBBF24 | border-top: 3px solid #FBBF24 | 3px yellow solid (warning) |
Pattern
bt{크기}{단위}{스타일}{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 |
|---|---|---|
| bt | border-top prefix | bt |
| {크기} | Border width number | 1, 2, 3 |
| {단위} | Unit (px, etc.) | px |
| {스타일} | solid, dashed, dotted, double | solid |
| {HEX6} | 6-digit HEX color code | DDDDDD |
Visual Comparison
Compares how various border-top classes affect elements.
bt0 (remove) — bt0
Content area
1px solid — bt1pxsolid27272A
Content area
2px solid indigo — bt2pxsolid6366F1
Content area
2px dashed — bt2pxdashed000000
Content area
3px solid green — bt3pxsolid34D399
Content area
Usage Examples
<!-- Section divider -->
<div class="bt1pxsolid27272A pt2rem mt2rem">
<h2>New Section</h2>
<p>Separated by top border</p>
</div>
<!-- Card top accent -->
<div class="bt3pxsolid6366F1 bg18181B p2rem br4px">
<h3>Pro Plan</h3>
<p>Emphasized with color line at top</p>
</div>
<!-- Remove border -->
<table>
<tr>
<td class="bt0">No top border</td>
</tr>
</table>
<!-- Change top border on hover -->
<div class="bt1pxsolid27272A hover-bt2pxsolid6366F1 p16px tall200msease cp">
Top border becomes emphasized on hover
</div>Practical Patterns
border-top commonly used for section dividers, modal headers, card top accents.
Section divider
Previous section content
Next section content
Card top color accent
Default
bt3pxsolid6366F1
Success
bt3pxsolid34D399
Warning
bt3pxsolidFBBF24
Responsive
Combine with media query prefixes to change top border by screen size.
<!-- Top divider only on desktop -->
<div class="bt1pxsolid27272A sm-bt0 pt2rem">
Top border shown on desktop only
</div>
<!-- Add top divider on mobile -->
<div class="bt0 sm-bt1pxsolid27272A pt16px">
Top border added below 768px
</div>Tips & Notes
Remove with bt0
bt0 applies border-top: 0. Useful for removing inherited borders.
Best for section dividers
Top border instead of bottom (bb) avoids unnecessary separators on last element.
Color must be 6-digit HEX
Always use 6-digit HEX. 3-digit shorthand not supported. E.g.: bt1pxsolidDDDDDD