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:2x: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.