Border

Bamboo's border utilities.

Bamboo provides CSS properties for styling borders.

Every group below has a logical counterpart that resolves against the document's writing mode. borderStartWidth emits border-inline-start-width, which is the left edge in LTR and the right edge in RTL. The radius shorthands compose corners rather than mapping to a single property: borderStartRadius sets border-start-start-radius and border-end-start-radius.

Compound Properties

The border compound property maps to the borders token category.

Prop	CSS Property	Token Category
`border`	`border`	`borders`
`borderX` , `borderInline`	`borderInline`	`borders`
`borderY` , `borderBlock`	`borderBlock`	`borders`
`borderStart` , `borderInlineStart`	`borderInlineStart`	`borders`
`borderEnd` , `borderInlineEnd`	`borderInlineEnd`	`borders`

Border Radius

<div className={css({ borderRadius: 'md' })} />
<div className={css({ rounded: 'md' })} /> // shorthand
<div className={css({ roundedTop: 'md' })} /> // one side
<div className={css({ roundedTopLeft: 'md' })} /> // one corner

Prop	CSS Property	Token Category
`rounded`,`borderRadius`	`border-radius`	`radii`
`roundedTopLeft`,`borderTopLeftRadius`	`border-top-left-radius`	`radii`
`roundedTopRight`,`borderTopRightRadius`	`border-top-right-radius`	`radii`
`roundedBottomRight`,`borderBottomRightRadius`	`border-bottom-right-radius`	`radii`
`roundedBottomLeft`,`borderBottomLeftRadius`	`border-bottom-left-radius`	`radii`
`roundedTop`,`borderTopRadius`	`border-top-{left+right}-radius`	`radii`
`roundedRight`,`borderRightRadius`	`border-{top+bottom}-right-radius`	`radii`
`roundedBottom`,`borderBottomRadius`	`border-bottom-{left+right}-radius`	`radii`
`roundedLeft`,`borderLeftRadius`	`border-{top+bottom}-left-radius`	`radii`

Logical Properties

<div className={css({ borderStartRadius: 'md' })} />
<div className={css({ roundedStart: 'md' })} /> // shorthand

Prop	CSS Property	Token Category
`roundedStartStart`,`borderStartStartRadius`	`border-start-start-radius`	`radii`
`roundedStartEnd`,`borderStartEndRadius`	`border-start-end-radius`	`radii`
`roundedStart`,`borderStartRadius`	`border-{start+end}-start-radius`	`radii`
`roundedEndStart`,`borderEndStartRadius`	`border-end-start-radius`	`radii`
`roundedEndEnd`,`borderEndEndRadius`	`border-end-end-radius`	`radii`
`roundedEnd` ,`borderEndRadius`	`border-{start+end}-end-radius`	`radii`

Border Width

<div className={css({ borderWidth: '1px' })} />
<div className={css({ borderTopWidth: '1px' })} /> // one side

Prop	CSS Property
`borderWidth`	`border-width`
`borderTopWidth`	`border-top-width`
`borderLeftWidth`	`border-left-width`
`borderRightWidth`	`border-right-width`
`borderBottomWidth`	`border-bottom-width`
`borderXWidth` , `borderInlineWidth`	`border-{left+right}-width`
`borderYWidth` , `borderBlockWidth`	`border-{top+bottom}-width`

Logical Properties

<div className={css({ borderStartWidth: '1px' })} />

Prop	CSS Property
`borderStartWidth` , `borderInlineStartWidth`	`border-inline-start-width`
`borderEndWidth` , `borderInlineEndWidth`	`border-inline-end-width`

Border Color

The border color utilities are used to set the border color of an element. It references the colors token category.

<div className={css({ borderColor: 'primary' })} />
<div className={css({ borderTopColor: 'primary' })} /> // one side

Prop	CSS Property	Token Category
`borderColor`	`border-color`	`colors`
`borderTopColor`	`border-top-color`	`colors`
`borderLeftColor`	`border-left-color`	`colors`
`borderRightColor`	`border-right-color`	`colors`
`borderBottomColor`	`border-bottom-color`	`colors`

Logical Properties

<div className={css({ borderInlineStartColor: 'red.500' })} />

Prop	CSS Property	Token Category
`borderStartColor` , `borderInlineStartColor`	`border-inline-start-color`	`colors`
`borderEndColor` , `borderInlineEndColor`	`border-inline-end-color`	`colors`
`borderXColor`, `borderInlineColor`	`border-inline-color`	`colors`
`borderYColor`, `borderBlockColor`	`border-block-color`	`colors`