Border width

Set physical border widths in pixels and establish a solid border style.

Set the thickness of a physical border on every side, an axis, or one edge.

Quick reference

Example class	Expected declarations
`border`	`border-top-width: 1px; border-top-style: solid; border-right-width: 1px; border-right-style: solid; border-bottom-width: 1px; border-bottom-style: solid; border-left-width: 1px; border-left-style: solid;`
`border-x-4`	`border-left-width: 4px; border-left-style: solid; border-right-width: 4px; border-right-style: solid;`
`border-y-2`	`border-top-width: 2px; border-top-style: solid; border-bottom-width: 2px; border-bottom-style: solid;`
`border-b-[3px]`	`border-bottom-width: 3px; border-bottom-style: solid;`
`border-l-4`	`border-left-width: 4px; border-left-style: solid;`
`border-r-2`	`border-right-width: 2px; border-right-style: solid;`
`border-t-4`	`border-top-width: 4px; border-top-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

Set all sides or a physical axis

border is 1px on all sides; x maps to left and right, and y maps to top and bottom. Numeric widths are pixels.

Set all sides or a physical axis

HTML

<div class="wind-demo-widths"><div class="wind-demo-box border p-2">border · 1px on all sides</div><div class="wind-demo-box border-x-4 p-2">border-x-4 · left and right</div><div class="wind-demo-box border-y-2 p-2">border-y-2 · top and bottom</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-widths {
  max-width: 32rem;
  color: #16324f;
  font: 14px / 1.5 system-ui, sans-serif;
}

.wind-demo-box {
  margin: .7rem 0;
}
.p-2 {
  padding-top: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;
}
.border {
  border-top-width: 1px;
  border-top-style: solid;
  border-right-width: 1px;
  border-right-style: solid;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-left-width: 1px;
  border-left-style: solid;
}
.border-x-4 {
  border-left-width: 4px;
  border-left-style: solid;
  border-right-width: 4px;
  border-right-style: solid;
}
.border-y-2 {
  border-top-width: 2px;
  border-top-style: solid;
  border-bottom-width: 2px;
  border-bottom-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-box": true,
      "wind-demo-widths": true
    },
    "safelist": {
      "docs-preview": [
        "border",
        "border-x-4",
        "border-y-2",
        "p-2"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo-widths { max-width: 32rem; color: #16324f; font: 14px/1.5 system-ui, sans-serif; }
.wind-demo-box { margin: 0.7rem 0; }

Tune one edge at a time

The four utilities target the named physical edge; border-b-[3px] supplies a one-off pixel width.

Tune one edge at a time

HTML

<div class="wind-demo-widths"><div class="wind-demo-box border-t-4 p-2">top · 4px</div><div class="wind-demo-box border-r-2 p-2">right · 2px</div><div class="wind-demo-box border-b-[3px] p-2">bottom · 3px</div><div class="wind-demo-box border-l-4 p-2">left · 4px</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-widths {
  max-width: 32rem;
  color: #16324f;
  font: 14px / 1.5 system-ui, sans-serif;
}

.wind-demo-box {
  margin: .7rem 0;
}
.p-2 {
  padding-top: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;
}
.border-b-\[3px\] {
  border-bottom-width: 3px;
  border-bottom-style: solid;
}
.border-l-4 {
  border-left-width: 4px;
  border-left-style: solid;
}
.border-r-2 {
  border-right-width: 2px;
  border-right-style: solid;
}
.border-t-4 {
  border-top-width: 4px;
  border-top-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-box": true,
      "wind-demo-widths": true
    },
    "safelist": {
      "docs-preview": [
        "border-b-[3px]",
        "border-l-4",
        "border-r-2",
        "border-t-4",
        "p-2"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo-widths { max-width: 32rem; color: #16324f; font: 14px/1.5 system-ui, sans-serif; }
.wind-demo-box { margin: 0.7rem 0; }

Custom and named values

The bare border utility emits a 1px solid border on all four sides. Integer suffixes are pixel lengths: border-x-4 means 4px on the left and right, while border-y-2 means 2px on the top and bottom. The x/y names refer to physical sides, not writing-mode-aware logical axes. border-t, border-r, border-b, and border-l target individual edges. Bracket values accept validated CSS lengths. These widths do not use spacingUnit and cannot be negative; each width utility also sets that edge’s style to solid.

Related guides: Utility grammar · Variants

Catalog details

border

Field	Value
Catalog identifier	`v1.border.width`
Class pattern	`border` or `border-<suffix>`
Grammar	`{"acceptedKinds":["exact","integer","arbitrary"],"arbitraryProperty":"border-top-width","allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`border-width` (`24`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`border-top-width`, `border-top-style`, `border-right-width`, `border-right-style`, `border-bottom-width`, `border-bottom-style`, `border-left-width`, `border-left-style`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"1px"`

Declaration templates

Property	Value kind	Fixed value
`border-top-width`	`resolved`	`null`
`border-top-style`	`fixed`	`"solid"`
`border-right-width`	`resolved`	`null`
`border-right-style`	`fixed`	`"solid"`
`border-bottom-width`	`resolved`	`null`
`border-bottom-style`	`fixed`	`"solid"`
`border-left-width`	`resolved`	`null`
`border-left-style`	`fixed`	`"solid"`

Catalog examples

Example class	Expected declarations
`border`	`border-top-width: 1px`; `border-top-style: solid`; `border-right-width: 1px`; `border-right-style: solid`; `border-bottom-width: 1px`; `border-bottom-style: solid`; `border-left-width: 1px`; `border-left-style: solid`

border-x

Field	Value
Catalog identifier	`v1.border.width.x`
Class pattern	`border-x` or `border-x-<suffix>`
Grammar	`{"acceptedKinds":["exact","integer","arbitrary"],"arbitraryProperty":"border-left-width","allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`border-width` (`24`)
Order rank	`1`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`border-left-width`, `border-left-style`, `border-right-width`, `border-right-style`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"1px"`

Declaration templates

Property	Value kind	Fixed value
`border-left-width`	`resolved`	`null`
`border-left-style`	`fixed`	`"solid"`
`border-right-width`	`resolved`	`null`
`border-right-style`	`fixed`	`"solid"`

Catalog examples

Example class	Expected declarations
`border-x`	`border-left-width: 1px`; `border-left-style: solid`; `border-right-width: 1px`; `border-right-style: solid`

border-y

Field	Value
Catalog identifier	`v1.border.width.y`
Class pattern	`border-y` or `border-y-<suffix>`
Grammar	`{"acceptedKinds":["exact","integer","arbitrary"],"arbitraryProperty":"border-top-width","allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`border-width` (`24`)
Order rank	`1`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`border-top-width`, `border-top-style`, `border-bottom-width`, `border-bottom-style`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"1px"`

Declaration templates

Property	Value kind	Fixed value
`border-top-width`	`resolved`	`null`
`border-top-style`	`fixed`	`"solid"`
`border-bottom-width`	`resolved`	`null`
`border-bottom-style`	`fixed`	`"solid"`

Catalog examples

Example class	Expected declarations
`border-y`	`border-top-width: 1px`; `border-top-style: solid`; `border-bottom-width: 1px`; `border-bottom-style: solid`

border-b

Field	Value
Catalog identifier	`v1.border.width.b`
Class pattern	`border-b` or `border-b-<suffix>`
Grammar	`{"acceptedKinds":["exact","integer","arbitrary"],"arbitraryProperty":"border-bottom-width","allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`border-width` (`24`)
Order rank	`2`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`border-bottom-width`, `border-bottom-style`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"1px"`

Declaration templates

Property	Value kind	Fixed value
`border-bottom-width`	`resolved`	`null`
`border-bottom-style`	`fixed`	`"solid"`

Catalog examples

Example class	Expected declarations
`border-b`	`border-bottom-width: 1px`; `border-bottom-style: solid`

border-l

Field	Value
Catalog identifier	`v1.border.width.l`
Class pattern	`border-l` or `border-l-<suffix>`
Grammar	`{"acceptedKinds":["exact","integer","arbitrary"],"arbitraryProperty":"border-left-width","allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`border-width` (`24`)
Order rank	`2`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`border-left-width`, `border-left-style`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"1px"`

Declaration templates

Property	Value kind	Fixed value
`border-left-width`	`resolved`	`null`
`border-left-style`	`fixed`	`"solid"`

Catalog examples

Example class	Expected declarations
`border-l`	`border-left-width: 1px`; `border-left-style: solid`

border-r

Field	Value
Catalog identifier	`v1.border.width.r`
Class pattern	`border-r` or `border-r-<suffix>`
Grammar	`{"acceptedKinds":["exact","integer","arbitrary"],"arbitraryProperty":"border-right-width","allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`border-width` (`24`)
Order rank	`2`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`border-right-width`, `border-right-style`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"1px"`

Declaration templates

Property	Value kind	Fixed value
`border-right-width`	`resolved`	`null`
`border-right-style`	`fixed`	`"solid"`

Catalog examples

Example class	Expected declarations
`border-r`	`border-right-width: 1px`; `border-right-style: solid`

border-t

Field	Value
Catalog identifier	`v1.border.width.t`
Class pattern	`border-t` or `border-t-<suffix>`
Grammar	`{"acceptedKinds":["exact","integer","arbitrary"],"arbitraryProperty":"border-top-width","allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`border-width` (`24`)
Order rank	`2`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`border-top-width`, `border-top-style`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"1px"`

Declaration templates

Property	Value kind	Fixed value
`border-top-width`	`resolved`	`null`
`border-top-style`	`fixed`	`"solid"`

Catalog examples

Example class	Expected declarations
`border-t`	`border-top-width: 1px`; `border-top-style: solid`

Border width

Quick reference

Examples in use

Set all sides or a physical axis

Tune one edge at a time

Custom and named values

border

Accepted values

Declaration templates

Catalog examples

border-x

Accepted values

Declaration templates

Catalog examples

border-y

Accepted values

Declaration templates

Catalog examples

border-b

Accepted values

Declaration templates

Catalog examples

border-l

Accepted values

Declaration templates

Catalog examples

border-r

Accepted values

Declaration templates

Catalog examples

border-t

Accepted values

Declaration templates

Catalog examples

Revision History