outline

Setting all the outline properties at once.

Overview

Examples

Set the full outline shorthand

Use outline:* when width, style, and color should be set together.

<button class="outline:2px|solid|blue-60">  Focused action</button>

@layer theme {  :root {    --color-blue-60: oklch(51.83% .2687 266.1)  }}@layer utilities {  .outline\:2px\|solid\|blue-60 {    outline: 2px solid var(--color-blue-60)  }}

Keep outlines for focus

Outlines do not affect layout and are important for keyboard focus. If you customize them, keep a visible focus style.

<button class="outline:2px|solid|blue-60 outline-offset:xs:focus">  Save</button>

Use outline-width, outline-style, outline-color, and outline-offset for focused changes.

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="outline:0 outline:2px|solid|blue-60:focus outline:0@print">...</div>

Avoid removing focus outlines unless another visible focus indicator replaces them.