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

Border Extras

Additional border-related utilities:

Property	Expected Values	Example
border-x	PassThroughToken (e.g., (1px_solid_currentColor))	border-x:(1px_solid_currentColor)
border-y	PassThroughToken (e.g., (1px_solid_currentColor))	border-y:(1px_solid_currentColor)
border-collapse	collapse, separate	border-collapse:collapse
border-spacing	SpacingToken	border-spacing:d2
border-image-source	PassThroughToken (e.g., (url(example.png)))	border-image-source:(url(example.png))
border-image-slice	PassThroughToken (e.g., (30))	border-image-slice:(30)
border-image-width	PassThroughToken (e.g., (10px))	border-image-width:(10px)
border-image-outset	PassThroughToken (e.g., (5))	border-image-outset:(5)
border-image-repeat	PassThroughToken (e.g., (stretch))	border-image-repeat:(stretch)