Border style

Choose a supported border line style or border-collapse behavior.

Choose a supported border line style, remove its line, or set a table’s border-collapse mode.

Quick reference

Example class	Expected declarations
`border-dashed`	`border-style: dashed;`
`border-dotted`	`border-style: dotted;`
`border-double`	`border-style: double;`
`border-none`	`border-style: none;`
`border-solid`	`border-style: solid;`
`border-collapse`	`border-collapse: collapse;`
`border-collapse-separate`	`border-collapse: separate;`

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 line patterns

The width utilities make each line visible; border-none changes the style to none while leaving the width value in place.

Compare line patterns

HTML

<div class="wind-demo-lines"><div class="wind-demo-line border-2 border-solid p-2">solid</div><div class="wind-demo-line border-2 border-dashed p-2">dashed</div><div class="wind-demo-line border-2 border-dotted p-2">dotted</div><div class="wind-demo-line border-4 border-double p-2">double</div><div class="wind-demo-line border-2 border-none p-2">none · no line</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-lines {
  max-width: 30rem;
  color: #16324f;
  font: 14px / 1.5 system-ui, sans-serif;
}

.wind-demo-line {
  margin: .55rem 0;
}
.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-4 {
  border-top-width: 4px;
  border-top-style: solid;
  border-right-width: 4px;
  border-right-style: solid;
  border-bottom-width: 4px;
  border-bottom-style: solid;
  border-left-width: 4px;
  border-left-style: solid;
}
.border-dashed {
  border-style: dashed;
}
.border-dotted {
  border-style: dotted;
}
.border-double {
  border-style: double;
}
.border-none {
  border-style: none;
}
.border-solid {
  border-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-line": true,
      "wind-demo-lines": true
    },
    "safelist": {
      "docs-preview": [
        "border-2",
        "border-4",
        "border-dashed",
        "border-dotted",
        "border-double",
        "border-none",
        "border-solid",
        "p-2"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo-lines { max-width: 30rem; color: #16324f; font: 14px/1.5 system-ui, sans-serif; }
.wind-demo-line { margin: 0.55rem 0; }

Choose how table cell borders meet

The utility on each table selects collapsed or separated borders; the scaffold supplies cell edges and spacing for comparison.

Choose how table cell borders meet

HTML

<div class="wind-demo-tables"><table class="wind-demo-table border-collapse"><tbody><tr><td class="wind-demo-cell">A</td><td class="wind-demo-cell">B</td></tr></tbody></table><table class="wind-demo-table border-collapse-separate"><tbody><tr><td class="wind-demo-cell">A</td><td class="wind-demo-cell">B</td></tr></tbody></table></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-tables {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  color: #16324f;
  font: 14px / 1.4 system-ui, sans-serif;
}

.wind-demo-table {
  border-spacing: .45rem;
}

.wind-demo-cell {
  border: 2px solid #0f766e;
  padding: .6rem 1rem;
  text-align: center;
}
.border-collapse {
  border-collapse: collapse;
}
.border-collapse-separate {
  border-collapse: separate;
}

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-cell": true,
      "wind-demo-table": true,
      "wind-demo-tables": true
    },
    "safelist": {
      "docs-preview": [
        "border-collapse",
        "border-collapse-separate"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo-tables { display: flex; flex-wrap: wrap; gap: 1rem; color: #16324f; font: 14px/1.4 system-ui, sans-serif; }
.wind-demo-table { border-spacing: 0.45rem; }
.wind-demo-cell { border: 2px solid #0f766e; padding: 0.6rem 1rem; text-align: center; }

Custom and named values

border-solid, border-dashed, border-dotted, border-double, and border-none set border-style. Pair a visible line style with a width utility; the style utility itself does not add width. border-none only changes the style. The exact utilities border-collapse and border-collapse-separate set the table border-collapse property. They are useful for table cells whose borders should merge or remain separated. Bare border widths independently establish solid style.

Related guides: Utility grammar · Variants

Catalog details

border-dashed

Field	Value
Catalog identifier	`v1.border.style.dashed`
Class pattern	`border-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	`border-style` (`26`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`border-style`

Accepted values

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

Declaration templates

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

Catalog examples

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

border-dotted

Field	Value
Catalog identifier	`v1.border.style.dotted`
Class pattern	`border-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	`border-style` (`26`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`border-style`

Accepted values

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

Declaration templates

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

Catalog examples

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

border-double

Field	Value
Catalog identifier	`v1.border.style.double`
Class pattern	`border-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	`border-style` (`26`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`border-style`

Accepted values

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

Declaration templates

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

Catalog examples

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

border-none

Field	Value
Catalog identifier	`v1.border.style.none`
Class pattern	`border-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	`border-style` (`26`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`border-style`

Accepted values

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

Declaration templates

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

Catalog examples

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

border-solid

Field	Value
Catalog identifier	`v1.border.style.solid`
Class pattern	`border-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	`border-style` (`26`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`border-style`

Accepted values

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

Declaration templates

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

Catalog examples

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

border-collapse

Field	Value
Catalog identifier	`v1.border.style.collapse`
Class pattern	`border-collapse`
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	`border-style` (`26`)
Order rank	`1`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`border-collapse`

Accepted values

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

Declaration templates

Property	Value kind	Fixed value
`border-collapse`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`border-collapse`	`border-collapse: collapse`

border-collapse-separate

Field	Value
Catalog identifier	`v1.border.style.separate`
Class pattern	`border-collapse-separate`
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	`border-style` (`26`)
Order rank	`1`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`border-collapse`

Accepted values

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

Declaration templates

Property	Value kind	Fixed value
`border-collapse`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`border-collapse-separate`	`border-collapse: separate`

Border style

Quick reference

Examples in use

Compare line patterns

Choose how table cell borders meet

Custom and named values

border-dashed

Accepted values

Declaration templates

Catalog examples

border-dotted

Accepted values

Declaration templates

Catalog examples

border-double

Accepted values

Declaration templates

Catalog examples

border-none

Accepted values

Declaration templates

Catalog examples

border-solid

Accepted values

Declaration templates

Catalog examples

border-collapse

Accepted values

Declaration templates

Catalog examples

border-collapse-separate

Accepted values

Declaration templates

Catalog examples

Revision History