CSS update: decoupling of Width and Style properties

what changed

Note the asymmetry: for border-width only the computed value is decoupled. The spec now says explicitly that its resolved value (what getComputedStyle() returns) is the used value, and “if the border-style corresponding to a given border-width is none or hidden, then the used width is 0”. For outline-width and column-rule-width no such used-value clause exists, so their resolved values follow the computed value and report the authored width.

syntax

The value grammar of the three properties is unchanged. What changed is each property’s Computed value line: the trailing special case (“; zero if the … style is none or hidden”) was removed by csswg-drafts PR #11913 (“Adjust *-width zero value special cases per WG resolution”, resolving issue #11494). Value definitions and the current computed-value lines, quoted verbatim from the editor’s drafts (read 2026-10-04):

<line-width> = <length [0,∞]> | thin | medium | thick

/* CSS Backgrounds & Borders Level 3 — §3.3 Line Thickness */
border-top-width, border-right-width, border-bottom-width, border-left-width
  Value:          <line-width>
  Initial:        medium
  Applies to:     all elements except ruby base containers and ruby annotation containers
  Computed value: absolute length, snapped as a border width

border-width
  Value:          <line-width>{1,4}

/* CSS Basic User Interface Level 4 — Outline Thickness */
outline-width
  Value:          <line-width>
  Initial:        medium
  Applies to:     all elements
  Computed value: absolute length, snapped as a border width

/* CSS Multi-column Layout Level 1 — The Width Of Column Rules */
column-rule-width
  Value:          <line-width>
  Initial:        medium
  Applies to:     multicol containers
  Computed value: absolute length, snapped as a border width

/* CSS Gaps Level 1 — Gap decoration width (list-valued extension) */
column-rule-width, row-rule-width
  Applies to:     grid containers, flex containers, multicol containers, and masonry containers
  Computed value: list of absolute lengths, snapped as a border width

The new normative clause added for borders only:

The resolved value for the border-width properties is the used value. If the border-style corresponding to a given border-width is none or hidden, then the used width is 0.

why it matters

Pages that read getComputedStyle().outlineWidth or columnRuleWidth — for example, to compute layout or animate from a base state — now get the authored value reliably across Chrome, Firefox, and Safari. For border-width the readback is unchanged (0px with border-style: none, because the resolved value is the used value), but its computed value no longer collapses to zero: since the Animation type of these properties is “by computed value”, toggling only border-style no longer makes border-width itself jump 0px → 4px, so a registered transition: border-width is no longer triggered by a pure style toggle, and values inherited with inherit carry the authored width.

examples

/* CSS */
.card {
  border-style: none;   /* no border painted */
  border-width: 4px;    /* preserved in the computed value since Chrome 147 */
  outline-style: none;
  outline-width: 6px;
}

// JavaScript
const cs = getComputedStyle(document.querySelector(".card"));

// outline-width (and column-rule-width): the resolved value now
// reflects the author-specified value even while the style is "none".
cs.outlineWidth;   // Chrome 147+: "6px"   (previously "0px")

// border-width still resolves to the USED value, which is 0 when no
// border is painted — only its COMPUTED value was decoupled.
cs.borderWidth;    // "0px" while border-style is none (unchanged)

browser compatibility

The decoupling change itself is not yet recorded in BCD: css/properties/border-width.json, outline-width.json and column-rule-width.json carry no note about it (raw JSON verified 2026-10-04). Interim data for the behavior change, labelled as such, from ChromeStatus and the vendor trackers:

Per-version support for the three properties themselves, from BCD (verified 2026-10-04):

quick reference

specifications

see also

• MDN: border-width · outline-width · column-rule-width
• csswg-drafts issue #11494 — the WG resolution this change implements
• Chromium implementation bug 393631108
• blink-dev Intent to Ship thread
• chrome-platform-showcase: width/style decoupling demos (five concepts, routes 200)
• ChromeStatus — CSS update: decoupling of Width and Style properties (5133099851317248)