Outline

Atomic outline classes allow you to quickly change an element's outline styling.

Warning: .outline-ring does not meet our accessibility standards for focus state styling and should be used for decorative purposes only.

Classes

Class	Output	Definition
`.outline-none`	`outline: 0;`	Removes the browser's default focus style. To maintain accessibility, care should be taken to replace the style that's been removed.
`.outline-ring`	`outline: solid var(--su-static4) var(--translucent-secondary);`	Adds an outline using our translucent secondary color.

<div class="outline-none">…</div>
<div class="outline-ring">…</div>

.outline-none

.outline-ring