Every designer who has ever laid out a multi-column article has run into the same infuriating problem: how do you draw a thin line between columns without it pushing everything sideways? Borders add width to the box model. Pseudo-elements have to be positioned absolutely and measured carefully. Background gradients work but feel like a cheat. For over a decade, none of the workarounds were satisfying.

CSS multi-column layout solved the problem years ago with column-rule. The rule sits inside the gap — purely decorative, zero layout impact. But for the longest time, that feature only worked for multi-column layout. Flexbox and grid had no equivalent. Chrome 139 changes that.

Gap decorations extend column-rule to work inside any gap — grid, flex, and multi-column — and introduce a matching row-rule property for horizontal separators. The rules respect the gap shorthand, appear only between occupied cells (not at the outer edges), and can be styled with any of the standard border-style keywords: solid, dashed, dotted, double, groove, ridge, inset, outset.

There is also a new column-rule-outset property — it controls how far the rule extends into the gap toward each cell. An outset of zero (the default) centres the rule. A positive outset pushes it toward the edges, leaving a small clear zone around each cell. The visual effect is somewhere between a margin and a padding — the whitespace belongs to the layout, the line belongs to the gap.

The implementation required re-thinking how the browser paints layout gaps. Previously, gaps were simply empty space — the rendering engine had no concept of what was inside them. Gap decorations required adding a new paint phase specifically for the gap regions, which is also why they were missing from flex and grid for so long. Getting the behaviour right across spanning items, wrapping rows, and inline-fragmented text was the hard part of the specification work.

For web developers, the migration is pleasant. Swap a border-right pattern out for column-rule on the parent, and the doubled edges and :last-child patches disappear. The amount of CSS that simply goes away is satisfying.