外框顏色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:2px outline:solid 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="fg:blue-60 outline:current">...</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.