CSS Gap Decorations

Category: CSS
Type: New or changed feature
Status: In development (Chrome In development)
Intent stage: None

Breaking change: No
Enterprise impact: None
Chromium flag: enable-experimental-web-platform-features
Spec maturity: Working draft
Web Platform Tests: Yes

WPT details: https://wpt.fyi/results/css/css-gaps

Summary

CSS Gap Decorations enables styling of gaps in container layouts like Grid and Flexbox, similar to ‘column-rule’ in multicol layout. This feature is highly requested by web authors who must use hacks to style the gaps in Grid and Flexbox layouts today.

Motivation

Today, web authors rely on non-ergonomic workarounds such as the following examples to apply styles to the gaps in Grid and Flexbox layouts: https://www.smashingmagazine.com/2017/09/css-grid-gotchas-stumbling-blocks/#how-do-i-add-backgrounds-and-borders-to-grid-areas https://x.com/geddski/status/1004731709764534274 CSS Gap Decorations will allow authors to avoid such workarounds and apply styles in a seamless manner provided by the platform.

Standards & signals

Specification: https://drafts.csswg.org/css-gaps-1
Firefox: Positive
Safari: Support
Web developers: Positive — Developers are excited about the CSS Gap Decoration feature. See discussions around this here: https://github.com/w3c/csswg-drafts/issues/10393 This also surfaced as a most requested missing feature in State of CSS 2023. https://2023.stateofcss.com/en-US/usage/#css_missing_features The chromium tracking issue (https://issues.chromium.org/issues/357648037) has 18 upvotes from developers. Following dev trials, the feature drew substantial enthusiasm across web developer channels: Social media: - https://www.linkedin.com/pulse/day-164-new-way-style-gaps-emiliano-pisu-x0h1f - https://mastodon.social/@anatudor/114201225562770826 - https://app.daily.dev/posts/a-new-way-to-style-gaps-in-css-9lolqu2yp - https://x.com/Manz/status/1968682837453799570 - https://x.com/shadeed9/status/1822025452476592630 - https://www.linkedin.com/posts/kirangrandhi_goodbye-to-css-hackshello-to-native-gap-activity-7341108234121900034-_ObL Articles and videos: - https://www.alwaystwisted.com/articles/styling-the-gap-with-css - https://youtu.be/L1-7dFQFb1c - https://css-tricks.com/the-gap-strikes-back-now-stylable/ - https://heydesigner.com/newsletter/product-design-2025/
Tracking bug: https://issues.chromium.org/issues/357648037

Ecosystem

Web Platform Tests: https://wpt.fyi/results/?q=css%2Fcss-gaps
Chrome Platform Showcase: https://chrome-platform-showcase.paulkinlan-ea.deno.net/features
GenDN reference: https://gendn.paulkinlan-ea.deno.net/features
chrome.dev demos search: https://www.google.com/search?q=site%3Achrome.dev+CSS%20Gap%20Decorations
MDN Web Docs: https://developer.mozilla.org/en-US/search?q=CSS%20Gap%20Decorations
Baseline status: https://webstatus.dev/?q=CSS%20Gap%20Decorations

Samples: https://microsoftedge.github.io/Demos/css-gap-decorations

Explainers: https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/CSSGapDecorations/explainer.md

View on chromestatus.com