Outline

Bamboo provides utilities for customizing outlines.

<div className={css({ outline: '2px solid token(colors.blue.500)', outlineOffset: '4' })} />
<div className={css({ ringWidth: '2px', ringColor: 'blue.500' })} /> // shorthands

A bare token name only resolves when it is the whole value. Inside a compound value such as outline, reference the token explicitly with token(colors.blue.500).