Outline width and offset
Set outline width or offset with length values; negative values are allowed only for offset.
Set the outline thickness and its distance from the element.
Quick reference
| Example class | Expected declarations |
|---|---|
outline-2 | outline-width: 2px; outline-style: solid; |
outline-offset-4 | outline-offset: 4px; |
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
Separate the line from its target
outline-2 draws a 2px line and outline-offset-4 places it 4px away; the configured outline color makes the boundary easy to see.
<div class="wind-demo-outline bg-panel text-ink p-3 outline-2 outline-offset-4 outline-focus">Focus indicator · 2px line · 4px offset</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 {
display: inline-block;
margin: .8rem;
font: 14px / 1.5 system-ui, sans-serif;
}
.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-4 {
outline-offset: 4px;
}
.outline-focus {
outline-color: var(--zw-color-focus);
}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
},
"safelist": {
"docs-preview": [
"bg-panel",
"outline-2",
"outline-focus",
"outline-offset-4",
"p-3",
"text-ink"
]
}
}
}Authored demonstration CSS
.wind-demo-outline { display: inline-block; margin: 0.8rem; font: 14px/1.5 system-ui, sans-serif; }Custom and named values
outline-2 uses pixels and sets a solid outline style along with the width. Bracket values accept validated CSS lengths. outline-offset-4 sets a 4px gap between the outline and the element; offset accepts integer pixels or an arbitrary length and may be negative. Outline does not take up layout space. Width and offset are separate catalog entries, so tune them independently. Keep a visible focus indicator on interactive controls.
Related guides: Utility grammar · Variants
Catalog details
outline
| Field | Value |
|---|---|
| Catalog identifier | v1.outline.width |
| Class pattern | outline or outline-<suffix> |
| Grammar | {"acceptedKinds":["exact","integer","arbitrary"],"arbitraryProperty":"outline-width","allowsFractionSlash":false,"allowsColorOpacity":false} |
| Accepted values | 1 |
| Token categories | No token category |
| Negative-value policy | forbidden |
| Conflict group and rank | outline-width (30) |
| Order rank | 0 |
| Selector shape | ownElement |
| Spec version | 1 |
| Emitter properties | outline-width, outline-style |
Accepted values
| Kind | Suffix | Emitted value |
|---|---|---|
exact | null | "1px" |
Declaration templates
| Property | Value kind | Fixed value |
|---|---|---|
outline-width | resolved | null |
outline-style | fixed | "solid" |
Catalog examples
| Example class | Expected declarations |
|---|---|
outline-2 | outline-width: 2px; outline-style: solid |
outline-offset
| Field | Value |
|---|---|
| Catalog identifier | v1.outline.offset |
| Class pattern | outline-offset-<suffix> |
| Grammar | {"acceptedKinds":["integer","arbitrary"],"arbitraryProperty":"outline-offset","allowsFractionSlash":false,"allowsColorOpacity":false} |
| Accepted values | The catalog has no separate accepted-value records for this entry. |
| Token categories | No token category |
| Negative-value policy | allowed |
| Conflict group and rank | outline-width (30) |
| Order rank | 1 |
| Selector shape | ownElement |
| Spec version | 1 |
| Emitter properties | outline-offset |
Accepted values
The catalog has no separate accepted-value records for this entry.
Declaration templates
| Property | Value kind | Fixed value |
|---|---|---|
outline-offset | resolved | null |
Catalog examples
| Example class | Expected declarations |
|---|---|
outline-offset-2 | outline-offset: 2px |