outline-color

Setting the color of an element’s outline.

Overview

Examples

Set outline color

Use outline:* with a color value to set the outline color.

<button class="outline:solid outline:2px outline:blue-60">  ...</button>

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

Inherit the text color

Use outline:current when the outline should follow currentColor.

<button class="outline:current fg:blue-60">...</button>

Use outline:transparent only when a transparent outline is needed to reserve contrast-mode behavior or avoid layout-free jumps between states.

Apply conditionally

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

<div class="outline:transparent outline:blue-60:focus outline:current@print">...</div>

The outline also needs a visible width and style.