Outline style

Choose a supported outline line style, including none.

Choose a supported outline line style, including a style that removes the outline.

Quick reference

Example class	Expected declarations
`outline-dashed`	`outline-style: dashed;`
`outline-dotted`	`outline-style: dotted;`
`outline-double`	`outline-style: double;`
`outline-none`	`outline-style: none;`
`outline-solid`	`outline-style: solid;`

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

Compare outline patterns

Each tile combines a width, offset, and configured color with one exact style. The none example retains a visible border and shows that the outline itself is removed.

Compare outline patterns

HTML

<div class="wind-demo-outline-grid"><div class="wind-demo-outline-box border-2 border-focus p-2 outline-2 outline-offset-2 outline-focus outline-solid">solid</div><div class="wind-demo-outline-box border-2 border-focus p-2 outline-2 outline-offset-2 outline-focus outline-dashed">dashed</div><div class="wind-demo-outline-box border-2 border-focus p-2 outline-2 outline-offset-2 outline-focus outline-dotted">dotted</div><div class="wind-demo-outline-box border-2 border-focus p-2 outline-2 outline-offset-2 outline-focus outline-double">double</div><div class="wind-demo-outline-box border-2 border-focus p-2 outline-2 outline-offset-2 outline-focus outline-none">none · border remains</div></div>

CSS

@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-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  max-width: 32rem;
  padding: .8rem;
  color: #16324f;
  font: 13px / 1.4 system-ui, sans-serif;
}

.wind-demo-outline-box {
  display: inline-block;
  margin: .25rem;
}
.p-2 {
  padding-top: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;
}
.border-2 {
  border-top-width: 2px;
  border-top-style: solid;
  border-right-width: 2px;
  border-right-style: solid;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-left-width: 2px;
  border-left-style: solid;
}
.border-focus {
  border-top-color: var(--zw-color-focus);
  border-right-color: var(--zw-color-focus);
  border-bottom-color: var(--zw-color-focus);
  border-left-color: var(--zw-color-focus);
}
.outline-2 {
  outline-width: 2px;
  outline-style: solid;
}
.outline-offset-2 {
  outline-offset: 2px;
}
.outline-focus {
  outline-color: var(--zw-color-focus);
}
.outline-dashed {
  outline-style: dashed;
}
.outline-dotted {
  outline-style: dotted;
}
.outline-double {
  outline-style: double;
}
.outline-none {
  outline-style: none;
}
.outline-solid {
  outline-style: solid;
}

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-box": true,
      "wind-demo-outline-grid": true
    },
    "safelist": {
      "docs-preview": [
        "border-2",
        "border-focus",
        "outline-2",
        "outline-dashed",
        "outline-dotted",
        "outline-double",
        "outline-focus",
        "outline-none",
        "outline-offset-2",
        "outline-solid",
        "p-2"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo-outline-grid { display: flex; flex-wrap: wrap; gap: 1.2rem; max-width: 32rem; padding: 0.8rem; color: #16324f; font: 13px/1.4 system-ui, sans-serif; }
.wind-demo-outline-box { display: inline-block; margin: 0.25rem; }

Custom and named values

The exact classes outline-solid, outline-dashed, outline-dotted, outline-double, and outline-none set outline-style. They do not supply width or color, so pair a visible style with outline width and color utilities. outline-none removes the outline completely; use it only when another clear focus indicator replaces it. The catalog does not include Tailwind’s outline-hidden utility.

Related guides: Utility grammar · Variants

Catalog details

outline-dashed

Field	Value
Catalog identifier	`v1.outline.style.dashed`
Class pattern	`outline-dashed`
Grammar	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`outline-style` (`32`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`outline-style`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"dashed"`

Declaration templates

Property	Value kind	Fixed value
`outline-style`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`outline-dashed`	`outline-style: dashed`

outline-dotted

Field	Value
Catalog identifier	`v1.outline.style.dotted`
Class pattern	`outline-dotted`
Grammar	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`outline-style` (`32`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`outline-style`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"dotted"`

Declaration templates

Property	Value kind	Fixed value
`outline-style`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`outline-dotted`	`outline-style: dotted`

outline-double

Field	Value
Catalog identifier	`v1.outline.style.double`
Class pattern	`outline-double`
Grammar	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`outline-style` (`32`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`outline-style`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"double"`

Declaration templates

Property	Value kind	Fixed value
`outline-style`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`outline-double`	`outline-style: double`

outline-none

Field	Value
Catalog identifier	`v1.outline.style.none`
Class pattern	`outline-none`
Grammar	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`outline-style` (`32`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`outline-style`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"none"`

Declaration templates

Property	Value kind	Fixed value
`outline-style`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`outline-none`	`outline-style: none`

outline-solid

Field	Value
Catalog identifier	`v1.outline.style.solid`
Class pattern	`outline-solid`
Grammar	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`outline-style` (`32`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`outline-style`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"solid"`

Declaration templates

Property	Value kind	Fixed value
`outline-style`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`outline-solid`	`outline-style: solid`

Outline style

Quick reference

Examples in use

Compare outline patterns

Custom and named values

outline-dashed

Accepted values

Declaration templates

Catalog examples

outline-dotted

Accepted values

Declaration templates

Catalog examples

outline-double

Accepted values

Declaration templates

Catalog examples

outline-none

Accepted values

Declaration templates

Catalog examples

outline-solid

Accepted values

Declaration templates

Catalog examples

Revision History