outline-color
Setting the color of an element’s outline.
Overview
| Class | Declarations |
|---|---|
outline-current | outline-color: currentColor;
|
outline-color:transparent | outline-color: transparent;
|
outline:<color> | outline: <color>;
|
Examples
Set outline color
outline-blue and other named color tokens change only outline color. For a literal value use outline-color:blue; outline:blue is the native shorthand and also resets outline style and width. These buttons declare their style and 3px width separately, so the blue and violet outlines have identical geometry.
<!-- Blue outline · 3px solid --><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 outline-width:3px outline-blue font-md bg-surface-base text-body box-border bg-surface-muted:focus-visible"> Preview details</button><!-- Violet outline · same width --><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 outline-width:3px outline-violet 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-blue { outline-color: var(--color-blue) }}Inherit the text color
outline-current follows the element’s own computed foreground. Hover or keyboard-focus the button to change both its label and outline through one text-color rule.
<!-- Current color · follows this label --><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 outline-width:3px outline-current font-md bg-surface-base text-blue box-border bg-surface-muted:focus-visible text-violet:hover@screen text-violet:focus-visible@screen"> Current color</button>The foreground may be inherited, but currentColor does not inherit the parent’s outline. A transparent outline still has a style and width; its visibility under forced colors depends on the user agent, so test the actual accessibility mode.
Apply conditionally
Keyboard focus changes the outline from transparent to blue. Print uses the current text color. All three states preserve the same width, style and layout box.
<!-- Transparent → blue on keyboard focus --><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 outline-width:3px outline-color:transparent font-md bg-surface-base text-body box-border bg-surface-muted:focus-visible outline-current@print outline-blue:focus-visible@screen"> Preview details</button>An outline needs both a visible style and width. A transparent resting ring is not a visible focus indicator until its color changes.