v147 · CSS · demo

Transition Continuity

Drive the same authored width through border-style, outline-style, and column-rule-style states. The live readout separates Typed OM computed values from legacy resolved/used reads so the border-style:none edge stays visible instead of being mislabeled.

4px

border-width + border-style

The visual border disappears under none or hidden, but computedStyleMap().get('border-top-width') can still expose the authored width.

border

outline-width + outline-style

getComputedStyle().outlineWidth is shown separately because current Chrome returns the authored width when the outline style is none.

outline

column-rule-width + column-rule-style

Column rules use the same width/style relationship, but the visual rule only paints when the style paints.

Column rule widths remain author controlled while the rule style decides whether the divider is painted between these columns.

live computed-value readout

surface style property computedStyleMap() getComputedStyle()
border-width border-top-style: solid get('border-top-width'): 4px borderTopWidth: 4px
outline-width outline-style: solid get('outline-width'): 4px outlineWidth: 4px
column-rule-width column-rule-style: solid get('column-rule-width'): 4px columnRuleWidth: 4px

Solid branch: all three surfaces paint, so the used width and computed width are expected to line up.

what the edge means

For border-style:none and border-style:hidden, getComputedStyle().borderTopWidth can still report the used/resolved paint width of 0px. That is not a failure of the feature. The decoupled computed value is the authored border-width, which this page reads through computedStyleMap().get('border-top-width'). The outline and column-rule rows show their own corresponding style and width properties so the three surfaces are not collapsed into a single border-only check.

.box {
  border-width: 4px;
  border-style: none;
}

const typedWidth = box.computedStyleMap().get('border-top-width');
const usedPaintWidth = getComputedStyle(box).borderTopWidth;

// In current Chrome evidence, typedWidth can be "4px" while
// usedPaintWidth remains "0px" because border-style:none does not paint.

see also

implementation reference

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