CSS gap decorations are now stable in Chrome and Edge 149, enabling developers to style gaps between grid, flexbox, and multi-column layout items without workarounds like borders, pseudo-elements, or extra DOM nodes. The feature extends column-rule to grid and flexbox, adds a new row-rule property, and introduces fine-grained controls: repeat() syntax for cycling styles across gaps, rule-break for intersection behavior, rule-inset for extending or shrinking decorations, rule-visibility-items for controlling when rules appear, and animation support for width, color, and insets. Built collaboratively by Microsoft Edge and Google Chrome teams, the feature is a progressive enhancement — unsupported browsers simply show no decorations.

6m read timeFrom developer.chrome.com
Post cover image
Table of contents
The problemThe solutionDemosChanges since the developer trialUse gap decorations todayUseful links
3 Comments

Sort: