Utilities

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`

List Sizing