Directional Border Controls
Apply borders to specific sides using directional utility classes:
.border
All sides
All sides
.bt
Top only
Top only
.br
Right only
Right only
.bb
Bottom only
Bottom only
.bl
Left only
Left only
.bx
Horizontal
Horizontal
.by
Vertical
Vertical
.bxy
All sides
All sides
Border Styles
Control border appearance with style modifier classes:
.border-solid
(default)
(default)
.border-dashed
.border-dotted
.border-none
Border Widths
Predefined width variables for consistent border sizing:
--border-width-thin
1px
1px
--border-width-medium
2px
2px
--border-width-thick
4px
4px
Custom Border Colors
Use RGB custom properties to customize border colors:
Red
Green
Blue
Purple
Orange
Teal
Asymmetric Borders
Control each border side independently with per-side custom properties:
Graduated Widths
1px → 2px → 4px → 8px
1px → 2px → 4px → 8px
Rainbow Colors
Red → Green → Blue → Purple
Red → Green → Blue → Purple
Interactive Border Demo
Hover over the cards to see border color transitions:
Hover Effect
Gray → Blue
Gray → Blue
Success State
Gray → Green
Gray → Green
Error State
Gray → Red
Gray → Red
Common UI Patterns
Real-world examples of border utility usage:
Card Component
Simple card with subtle gray border
Simple card with subtle gray border
border + --border-color: 229 231 235
Section Divider
Bottom border as visual separator
Bottom border as visual separator
bb + --border-b-color: 229 231 235
Sidebar Accent
Left border for highlighting content
Left border for highlighting content
bl + --border-l-color: 59 130 246
Input Field Style
Horizontal borders for form elements
Horizontal borders for form elements
bx + --border-x-color: 209 213 219