Border Shorthand

Borders combine size, unit, style, and color in a single class.

Format

b{size}{unit}{style}{HEX6}

Full Border

Class	CSS
`b1pxsolidDDDDDD`	border: 1px solid #DDDDDD
`b2pxsolidFF0000`	border: 2px solid #FF0000
`b1pxdashed999999`	border: 1px dashed #999999
`bn`	border: none

Directional Border

Append direction abbreviation after b:

Prefix	direction	Example	CSS
`bt`	top	`bt2pxdashed000000`	border-top: 2px dashed #000000
`br`	right	`br1pxsolid1e1e2e`	border-right: 1px solid #1E1E2E
`bb`	bottom	`bb1pxsolid27272a`	border-bottom: 1px solid #27272A
`bl`	left		border-left: 3px solid #6366F1

Border Styles

Keyword	CSS
`solid`	solid
`dashed`	dashed
`dotted`	dotted
`double`	double

Usage Examples

<!-- Default border -->
<div class="b1pxsolidDDDDDD br8px p2rem">Default card</div>

<!-- Left accent border -->
<div class="p12px">Blockquote style</div>

<!-- Bottom divider -->
<div class="bb1pxsolid27272A pb16px mb16px">Section</div>

<!-- No border -->
<button class="bn bg6366F1 cFFFFFF p12px br8px">Button</button>