Outline color
Set outline color from configured values or a validated arbitrary color.
Color an outline independently of its thickness, distance, and line style.
Quick reference
| Example class | Expected declarations |
|---|---|
outline-focus/90 | outline-color: color-mix(in oklab, var(--zw-color-focus) 90%, transparent); |
outline-[#8b1e3f] | outline-color: #8b1e3f; |
Example setup
The shared preview base explicitly sets spec 1, reset: "none", strict mode, tokens.spacingUnit: "0.25rem", and no breakpoints. Each named value is configured in that example; there is no inherited palette or theme. wind-demo classes are authored context styles; their CSS is shown separately from the utility declarations.
Examples in use
Use a configured focus color
outline-focus/90 uses an explicit color token and the supported color-opacity modifier; width and offset come from their own utilities.
<div class="wind-demo-outline-row"><div class="wind-demo-outline bg-panel text-ink p-3 outline-2 outline-offset-3 outline-focus/90">Configured focus color at 90 percent</div></div>@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
:root {
--zw-color-accent: #075985;
--zw-color-alert: #8b1e3f;
--zw-color-focus: #0f766e;
--zw-color-ink: #16324f;
--zw-color-panel: #edf4f8;
--zw-color-white: #fff;
--zw-spacing-unit: .25rem;
}
}
.wind-demo-outline-row {
font: 14px / 1.5 system-ui, sans-serif;
}
.wind-demo-outline {
display: inline-block;
margin: .8rem;
}
.p-3 {
padding-top: 0.75rem;
padding-right: 0.75rem;
padding-bottom: 0.75rem;
padding-left: 0.75rem;
}
.text-ink {
color: var(--zw-color-ink);
}
.bg-panel {
background-color: var(--zw-color-panel);
}
.outline-2 {
outline-width: 2px;
outline-style: solid;
}
.outline-offset-3 {
outline-offset: 3px;
}
.outline-focus\/90 {
outline-color: color-mix(in oklab, var(--zw-color-focus) 90%, transparent);
}Configuration for this example
{
"wind": {
"spec": 1,
"reset": "none",
"strict": true,
"tokens": {
"spacingUnit": "0.25rem",
"colors": {
"ink": "#16324f",
"accent": "#075985",
"focus": "#0f766e",
"alert": "#8b1e3f",
"panel": "#edf4f8",
"white": "#ffffff"
}
},
"breakpoints": {},
"defaultTransitionTimingFunction": "ease",
"authoredClasses": {
"wind-demo-outline": true,
"wind-demo-outline-row": true
},
"safelist": {
"docs-preview": [
"bg-panel",
"outline-2",
"outline-focus/90",
"outline-offset-3",
"p-3",
"text-ink"
]
}
}
}Authored demonstration CSS
.wind-demo-outline-row { font: 14px/1.5 system-ui, sans-serif; }
.wind-demo-outline { display: inline-block; margin: 0.8rem; }Use a one-off outline color
The bracket color is validated CSS; the example keeps width and offset as separate utilities.
<div class="wind-demo-outline-row"><div class="wind-demo-outline bg-panel text-ink p-3 outline-2 outline-offset-3 outline-[#8b1e3f]">Validated arbitrary outline color</div></div>@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
:root {
--zw-color-accent: #075985;
--zw-color-alert: #8b1e3f;
--zw-color-focus: #0f766e;
--zw-color-ink: #16324f;
--zw-color-panel: #edf4f8;
--zw-color-white: #fff;
--zw-spacing-unit: .25rem;
}
}
.wind-demo-outline-row {
font: 14px / 1.5 system-ui, sans-serif;
}
.wind-demo-outline {
display: inline-block;
margin: .8rem;
}
.p-3 {
padding-top: 0.75rem;
padding-right: 0.75rem;
padding-bottom: 0.75rem;
padding-left: 0.75rem;
}
.text-ink {
color: var(--zw-color-ink);
}
.bg-panel {
background-color: var(--zw-color-panel);
}
.outline-2 {
outline-width: 2px;
outline-style: solid;
}
.outline-offset-3 {
outline-offset: 3px;
}
.outline-\[\#8b1e3f\] {
outline-color: #8b1e3f;
}Configuration for this example
{
"wind": {
"spec": 1,
"reset": "none",
"strict": true,
"tokens": {
"spacingUnit": "0.25rem",
"colors": {
"ink": "#16324f",
"accent": "#075985",
"focus": "#0f766e",
"alert": "#8b1e3f",
"panel": "#edf4f8",
"white": "#ffffff"
}
},
"breakpoints": {},
"defaultTransitionTimingFunction": "ease",
"authoredClasses": {
"wind-demo-outline": true,
"wind-demo-outline-row": true
},
"safelist": {
"docs-preview": [
"bg-panel",
"outline-2",
"outline-[#8b1e3f]",
"outline-offset-3",
"p-3",
"text-ink"
]
}
}
}Authored demonstration CSS
.wind-demo-outline-row { font: 14px/1.5 system-ui, sans-serif; }
.wind-demo-outline { display: inline-block; margin: 0.8rem; }Custom and named values
Named outline colors use tokens.colors; outline-current and outline-transparent are supported keywords. Arbitrary values such as outline-[#8b1e3f] are validated as CSS colors. A slash modifier accepts an integer from 0 through 100 and mixes the color with transparent in Oklab. The outline root is shared: integer suffixes resolve as width, while configured color names and CSS colors resolve as color. No automatic color palette is provided.
Related guides: Utility grammar · Variants
Catalog details
outline
| Field | Value |
|---|---|
| Catalog identifier | v1.outline.color |
| Class pattern | outline-<suffix> |
| Grammar | {"acceptedKinds":["keyword","token","arbitrary"],"arbitraryProperty":"outline-color","allowsFractionSlash":false,"allowsColorOpacity":true} |
| Accepted values | 2 |
| Token categories | colors |
| Negative-value policy | forbidden |
| Conflict group and rank | outline-color (31) |
| Order rank | 0 |
| Selector shape | ownElement |
| Spec version | 1 |
| Emitter properties | outline-color |
Accepted values
| Kind | Suffix | Emitted value |
|---|---|---|
keyword | "transparent" | "transparent" |
keyword | "current" | "currentColor" |
Declaration templates
| Property | Value kind | Fixed value |
|---|---|---|
outline-color | resolved | null |
Catalog examples
| Example class | Expected declarations |
|---|---|
outline-[red]/40 | outline-color: color-mix(in oklab, red 40%, transparent) |