Border
Panda's border utilities.
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' })} /> // shorthandSpecific 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' })} /> // shorthandSpecific 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.
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| 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.
For example, borderStartWidth will map to border-left-width in LTR mode, and border-right-width in RTL 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.
For example, borderInlineStartColor will map to border-left-color in LTR mode, and border-right-color in RTL
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 |
Full reference
Generated from @pandacss/preset-base, so this table always matches the utilities Panda ships.
| Property | Shorthand | Class | Values |
|---|---|---|---|
| border | — | bd | borders |
| borderBlock | borderY | bd-y | borders |
| borderBlockColor | borderYColor | bd-y-c | colors |
| borderBlockEnd | — | bd-be | borders |
| borderBlockEndColor | — | bd-be-c | colors |
| borderBlockStart | — | bd-bs | borders |
| borderBlockStartColor | — | bd-bs-c | colors |
| borderBlockWidth | borderYWidth | bd-y-w | borderWidths |
| borderBottom | — | bd-b | borders |
| borderBottomColor | — | bd-b-c | colors |
| borderBottomWidth | — | bd-b-w | borderWidths |
| borderColor | — | bd-c | colors |
| borderInline | borderX | bd-x | borders |
| borderInlineColor | borderXColor | bd-x-c | colors |
| borderInlineEnd | borderEnd | bd-e | borders |
| borderInlineEndColor | borderEndColor | bd-e-c | colors |
| borderInlineEndWidth | borderEndWidth | bd-e-w | borderWidths |
| borderInlineStart | borderStart | bd-s | borders |
| borderInlineStartColor | borderStartColor | bd-s-c | colors |
| borderInlineStartWidth | borderStartWidth | bd-s-w | borderWidths |
| borderInlineWidth | borderXWidth | bd-x-w | borderWidths |
| borderLeft | — | bd-l | borders |
| borderLeftColor | — | bd-l-c | colors |
| borderLeftWidth | — | bd-l-w | borderWidths |
| borderRight | — | bd-r | borders |
| borderRightColor | — | bd-r-c | colors |
| borderRightWidth | — | bd-r-w | borderWidths |
| borderTop | — | bd-t | borders |
| borderTopColor | — | bd-t-c | colors |
| borderTopWidth | — | bd-t-w | borderWidths |
| divideColor | — | dvd-c | colors |
| divideStyle | — | dvd-s | — |
| divideX | — | dvd-x | borderWidths |
| divideY | — | dvd-y | borderWidths |
| outline | ring | ring | borders |
| outlineOffset | ringOffset | ring-o | spacing |
| outlineWidth | ringWidth | ring-w | borderWidths |
| strokeDasharray | — | stk-dsh | — |
| strokeDashoffset | — | stk-do | — |
| strokeLinecap | — | stk-lc | — |
| strokeLinejoin | — | stk-lj | — |
| strokeMiterlimit | — | stk-ml | — |
| strokeOpacity | — | stk-op | — |
| strokeWidth | — | stk-w | borderWidths |
| Property | Shorthand | Class | Values |
|---|---|---|---|
| borderBlockEndWidth | — | bd-be-w | borderWidths |
| borderBlockStartWidth | — | bd-bs-w | borderWidths |
| borderBottomLeftRadius | roundedBottomLeft | bdr-bl | radii |
| borderBottomRadius | roundedBottom | bdr-b | radii |
| borderBottomRightRadius | roundedBottomRight | bdr-br | radii |
| borderEndEndRadius | roundedEndEnd | bdr-ee | radii |
| borderEndRadius | roundedEnd | bdr-e | radii |
| borderEndStartRadius | roundedEndStart | bdr-es | radii |
| borderLeftRadius | roundedLeft | bdr-l | radii |
| borderRadius | rounded | bdr | radii |
| borderRightRadius | roundedRight | bdr-r | radii |
| borderStartEndRadius | roundedStartEnd | bdr-se | radii |
| borderStartRadius | roundedStart | bdr-s | radii |
| borderStartStartRadius | roundedStartStart | bdr-ss | radii |
| borderTopLeftRadius | roundedTopLeft | bdr-tl | radii |
| borderTopRadius | roundedTop | bdr-t | radii |
| borderTopRightRadius | roundedTopRight | bdr-tr | radii |
| borderWidth | — | bd-w | borderWidths |