Outline

Panda provides utilities for customizing outlines.

Compound Property

Set the width, color, and style of the outline.

<div className={css({ outline: '2px solid blue.500' })} />
<div className={css({ ring: '2px solid blue.500' })} /> // shorthand

Prop	CSS Property	Token Category
ring , outline	outline	borders

Outline Width

Change the width of the outline.

<div className={css({ outlineWidth: '4' })} />
<div className={css({ outlineWidth: '2px' })} />
<div className={css({ ringWidth: '2px' })} /> // shorthand

Prop	CSS Property	Token Category
ringWidth , outlineWidth	outline-width	borderWidths

Outline Color

Change the color of the outline.

<div className={css({ outlineColor: 'blue.500' })} />
<div className={css({ ringColor: 'blue.500' })} /> // shorthand

Prop	CSS Property	Token Category
outlineColor	outline-color	colors

Outline Offset

Adjust the space between the outline and the element.

<div className={css({ outlineOffset: '4' })} />
<div className={css({ ringOffset: '4' })} /> // shorthand

Prop	CSS Property	Token Category
outlineOffset	outline-offset	spacing