outline
Setting all the outline properties at once.
Overview
| Class | Declarations |
|---|---|
outline:solid | outline: solid;
|
outline:<size>|<style>|<color> | outline: <size> <style> <color>;
|
Examples
Set the full outline shorthand
Combine width, style and color in one outline shorthand. Compare an explicit 4px blue outline with outline:solid, which uses the native medium width and current foreground color.
<!-- Full shorthand · explicit components --><button id="target" type="button" class="inline-flex items-center justify-center min-h:44px max-w:100% px-md py-sm b:1px|solid|var(--color-line-base) r-sm outline:4px|solid|var(--color-blue) outline-offset-3xs font-md bg-surface-base text-body box-border bg-surface-muted:focus-visible"> Preview details</button><!-- Style-only shorthand · other components reset --><button id="target" type="button" class="inline-flex items-center justify-center min-h:44px max-w:100% px-md py-sm b:1px|solid|var(--color-line-base) r-sm outline:solid outline-offset-3xs font-md bg-surface-base text-body box-border bg-surface-muted:focus-visible"> Preview details</button>Generated CSS
@layer theme { :root, :host { --color-blue: var(--color-blue-60); --color-blue-60: oklch(51.83% .2687 266.1); --color-blue-50: oklch(58.22% .2279 263.9) } @media (prefers-color-scheme:light) { :root { --color-blue: var(--color-blue-60) } } @media (prefers-color-scheme:light) { :host { --color-blue: var(--color-blue-60) } } @media (prefers-color-scheme:dark) { :root { --color-blue: var(--color-blue-50) } } @media (prefers-color-scheme:dark) { :host { --color-blue: var(--color-blue-50) } }}@layer utilities { .outline\:4px\|solid\|var\(--color-blue\) { outline: 4px solid var(--color-blue) } .outline\:solid { outline: solid }}The shorthand resets outline width, style and color. It does not reset outline-offset. The outline paints around the box without taking layout space.
Keep outlines for focus
Use Tab to focus this button. Its transparent resting outline becomes blue on keyboard focus. The button and neighboring content keep their layout dimensions.
<!-- Keyboard focus · visible blue ring --><button id="target" type="button" class="inline-flex items-center justify-center min-h:44px max-w:100% px-md py-sm b:1px|solid|var(--color-line-base) r-sm outline:2px|solid|transparent outline-offset-3xs font-md bg-surface-base text-body box-border outline-blue:focus-visible bg-surface-muted:focus-visible"> Save changes</button>A custom focus treatment must remain visible. The outline follows the real :focus-visible state; a pointer click does not necessarily trigger that state. Use outline-offset to leave space around the edge.
Apply conditionally
Keyboard focus draws a 3px blue outline on screen. Print removes its width. The border and content remain unchanged.
<!-- Keyboard focus on screen · no printed ring --><button id="target" type="button" class="inline-flex items-center justify-center min-h:44px max-w:100% px-md py-sm b:1px|solid|var(--color-line-base) r-sm outline:0|solid|var(--color-blue) outline-offset-3xs font-md bg-surface-base text-body box-border bg-surface-muted:focus-visible outline-width:0@print outline:3px|solid|var(--color-blue):focus-visible@screen"> Preview details</button>The screen qualification prevents the focus rule from overriding the print reset. Never remove the only visible keyboard focus indicator.