v147 · CSS · Computed Values

CSS update: decoupling of Width and Style properties

In Chrome 147, the computed values of border-width, outline-width, and column-rule-width now reflect the author-specified value directly, independent of the corresponding *-style property — aligning Chrome with Firefox and WebKit.

concepts

  1. Computed Value Inspector

    Live inspector for computedStyleMap() and getComputedStyle(). It shows the corrected computed values for border-width, outline-width, and column-rule-width, including the border used-value edge where painting still collapses to 0px.

  2. Transition Continuity

    Demonstrates the practical impact: CSS transitions on border-width now animate through none / hidden style states without a jarring snap to zero, enabling previously impossible border appearance effects.

  3. Width/Style Invariant Test

    Runs a live invariant suite across border-width, outline-width, and column-rule-width. Border cases read the computed value through computedStyleMap(); outline and column-rule cases verify their resolved values through getComputedStyle().

  4. Animation Pipeline Demo

    Builds a multi-step CSS animation pipeline where border-width and outline-width animate through none style states. Shows how Chrome 147's decoupled computed values let custom-property chains carry widths through intermediate none frames without snapping to zero.

  5. Compatibility Lab

    Runs exact compatibility probes for the decoupled width/style contract and the malformed-width failure branch. The lab separates computed values from resolved or used values so authors do not mistake getComputedStyle().borderTopWidth for the new border computed-value surface.

why it shipped

The old behaviour forced the computed value of border-width, outline-width, and column-rule-width to 0px whenever the corresponding *-style was none or hidden. Chrome 147 aligns with the updated CSS specifications by keeping the width's computed value independent of style. For border-width, authors should distinguish that computed value from the resolved or used value exposed by getComputedStyle(), which can still be 0px when the border is not painted. For outline-width and column-rule-width, the resolved values returned by getComputedStyle() also reflect the authored widths.

references

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗