Borders

bd Property Modifiers

Elevate supports the following modifiers for the border (abbreviated as bd) property:

Modifier	Expected Values	Example
Width	SpacingToken (e.g., d3)	bd:width-d4
Style	solid, dashed, dotted, double, groove, ridge, inset, outset	bd:dashed
Radius	SpacingToken (e.g., d3)	bd:round-d4
Top Left Radius	SpacingToken (e.g., d3)	bd:roundtl-d4
Top Right Radius	SpacingToken (e.g., d3)	bd:roundtr-d4
Bottom Left Radius	SpacingToken (e.g., d3)	bd:roundbl-d4
Bottom Right Radius	SpacingToken (e.g., d3)	bd:roundbr-d4
Color	ColorToken (e.g., purple+1)	bd:purple+1

Elevate also supports single directional variations for the bd property such as:

Single Directional Properties	Expected Values	Example
bd-t	See Modifiers Above	bd-t:width-d4:purple+1
bd-b	See Modifiers Above	bd-b:round-d2:width-d2:dashed
bd-l	See Modifiers Above	bd-l:width-d2:solid
bd-r	See Modifiers Above	bd-r:width-d6:solid:indigo