border-color
Sets border color. Requires border-width and border-style for visibility. Color included in border shorthand.
Class List
Specify 6-digit HEX border color with bc{HEX6}.
| Class | CSS | Preview |
|---|---|---|
bc000000 | border-color: #000000 | |
bcFFFFFF | border-color: #FFFFFF | |
bcDDDDDD | border-color: #DDDDDD | |
bc6366F1 | border-color: #6366F1 | |
bc34D399 | border-color: #34D399 | |
bcF43F5E | border-color: #F43F5E | |
bc27272A | border-color: #27272A |
Relationship with Border Shorthand
Border shorthand b1pxsolid{HEX6} already includes color. bc changes border-color separately.
<!-- Border shorthand: color included -->
<div class="b1pxsolidDDDDDD p16px br8px">Color included in shorthand</div>
<!-- Set border-color separately -->
<div class="bw2px bssolid bc6366F1 p16px br8px">Set only color with bc</div>
<!-- Change border color on hover -->
<div class="b2pxsolid27272A hover-bc6366F1 p16px br8px cp tall200msease">
Hover me
</div>hover border color
Change border color on hover with hover-bc{HEX6}.
hover-bc6366F1
hover-bc34D399
hover-bcF43F5E
Usage Examples
<!-- Input field focus color -->
<input class="bw1px bssolid bc27272A focus-bc6366F1 p12px br8px bg18181B cFAFAFA" />
<!-- Emphasized card border -->
<div class="b2pxsolid6366F1 p2rem br8px">
Highlighted card
</div>
<!-- Divider color -->
<div class="bb1pxsolidDDDDDD pb16px mb16px">
Content with bottom divider
</div>