Utilities

Border

Panda provides the css properties for styling 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
PropCSS PropertyToken Category
rounded,borderRadiusborder-radiusradii
roundedTop,borderTopRadiusborder-top-{left+right}-radiusradii
roundedLeft,borderLeftRadiusborder-{top+bottom}-left-radiusradii
roundedRight,borderRightRadiusborder-{top+bottom}-right-radiusradii
roundedBottom,borderBottomRadiusborder-bottom-{left+right}-radiusradii
roundedTopLeft,borderTopLeftRadiusborder-top-left-radiusradii
roundedTopRight,borderTopRightborder-top-right-radiusradii
roundedBottomLeft,borderBottomLeftborder-bottom-left-radiusradii
roundedBottomRight,borderBottomRightborder-bottom-right-radiusradii

Logical Properties

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

💡

For example, borderStartRadius will map to border-left-radius in LTR mode, and border-right-radius in RTL mode.

<div className={css({ borderStartRadius: 'md' })} />
<div className={css({ roundedStart: 'md' })} /> // shorthand
PropCSS PropertyToken Category
roundedStart,borderStartRadiusborder-{start+end}-start-radiusradii
roundedEnd,borderEndRadiusborder-{start+end}-end-radiusradii
roundedTopStart,borderTopStartRadiusborder-top-start-radiusradii
roundedTopEnd,borderTopEndRadiusborder-top-end-radiusradii
roundedBottomStart,borderBottomStartborder-bottom-start-radiusradii
roundedBottomEnd,borderBottomEndborder-bottom-end-radiusradii

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' })} />
PropCSS Property
borderWidthborder-width
borderTopWidthborder-top-width
borderLeftWidthborder-left-width
borderRightWidthborder-right-width
borderBottomWidthborder-bottom-width
borderXWidthborder-{left+right}-width
borderYWidthborder-{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.

💡

For example, borderStartWidth will map to border-left-width in LTR mode, and border-right-width in RTL mode.

<div className={css({ borderStartWidth: '1px' })} />
PropCSS Property
borderStartWidthborder-{start+end}-width
borderEndWidthborder-{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' })} />
PropCSS PropertyToken Category
borderColorborder-colorcolors
borderTopColorborder-top-colorcolors
borderLeftColorborder-left-colorcolors
borderRightColorborder-right-colorcolors
borderBottomColorborder-bottom-colorcolors

Logical Properties

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

💡

For example, borderInlineStartColor will map to border-left-color in LTR mode, and border-right-color in RTL mode.

<div className={css({ borderInlineStart: 'red.500' })} />
PropCSS PropertyToken Category
borderInlineStartColorborder-{start+end}-colorcolors
borderInlineEndColorborder-{start+end}-colorcolors
borderXColor, borderInlineColorborder-inline-colorcolors
borderYColor, borderBlockColorborder-block-colorcolors