Border

Panda provides CSS properties for styling borders.

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

All sides

<div className={css({ borderRadius: 'md' })} />
<div className={css({ rounded: 'md' })} /> // shorthand

Specific sides

Use the border{Left|Right|Top|Bottom}Radius properties, or the shorthand equivalent to apply border radius on a specific side of an element.

<div className={css({ borderTopRadius: 'md' })} />
<div className={css({ roundedTop: 'md' })} /> // shorthand
 
<div className={css({ borderLeftRadius: 'md' })} />
<div className={css({ roundedLeft: 'md' })} /> // shorthand

Specific corners

Use the border{Top|Bottom}{Left|Right}Radius properties, or the shorthand equivalent to round a specific corner.

<div className={css({ borderTopLeftRadius: 'md' })} />
<div className={css({ roundedTopLeft: 'md' })} /> // shorthand

Prop	CSS Property	Token Category
rounded,borderRadius	border-radius	radii
roundedTopLeft,borderTopLeftRadius	border-top-left-radius	radii
roundedTopRight,borderTopRight	border-top-right-radius	radii
roundedBottomRight,borderBottomRight	border-bottom-right-radius	radii
roundedBottomLeft,borderBottomLeft	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

Panda also provides the logical properties for border radius, which map to corresponding physical properties based on the document's writing mode.

<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

All sides

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

Specific sides

Use the border{Left|Right|Top|Bottom}Width properties, to apply border width on a specific side of an element.

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

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

Panda also provides the logical properties for border width, which map to corresponding physical properties based on the document's writing mode.

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

Prop	CSS Property
borderStartWidth , borderInlineStartWidth	border-{start+end}-width
borderEndWidth , borderInlineEndWidth	border-{start+end}-width

Border Color

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

All sides

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

Specific sides

Use the border{Left|Right|Top|Bottom}Color properties to apply border color on a specific side of an element.

<div className={css({ borderTopColor: 'primary' })} />
<div className={css({ borderLeftColor: 'primary' })} />

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

Panda also provides the logical properties for border color, which map to corresponding physical properties based on the document's writing mode.

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

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