--- title: Gap Decorations Are Now Available, Here’s What’s New description: CSS gap decorations are now fully supported in Chrome and Edge 149+, enabling developers to style gaps between grid and flexbox items without hacks. The... canonical: https://daily.dev/posts/gap-decorations-are-now-available-here-s-what-s-new-8ahsqtdo9 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Gap Decorations Are Now Available, Here’s What’s New | daily.dev og:description: CSS gap decorations are now fully supported in Chrome and Edge 149+, enabling developers to style gaps between grid and flexbox items without hacks. The... og:url: https://daily.dev/posts/gap-decorations-are-now-available-here-s-what-s-new-8ahsqtdo9 og:image: https://api.daily.dev/og/posts/8AHsqTDo9.png og:image:alt: Gap Decorations Are Now Available, Here’s What’s New og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Gap Decorations Are Now Available, Here’s What’s New **[CSS-Tricks](https://daily.dev/sources/css_tricks)** · 9 min read · 24 upvotes · 0 comments ## Summary CSS gap decorations are now fully supported in Chrome and Edge 149+, enabling developers to style gaps between grid and flexbox items without hacks. The feature extends the familiar column-rule property to work in grid and flexbox, adds a new row-rule property, and introduces fine-grained control via properties like rule-inset, rule-overlap, and rule-visibility-items. Key changes since the early preview include renaming outset to inset, new longhand inset properties for caps and junctions, renaming gap-rule-paint-order to rule-overlap, and a new rule-visibility-items property. A step-by-step demo walks through applying gap decorations to a personal site with flexbox nav, wrapping flex sections, spanning grid items, and link grids. A polyfill is in development for unsupported browsers. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### What browsers support CSS gap decorations and starting from which version? CSS gap decorations are fully supported in Chrome and Edge starting with version 149, with the implementation rolling out across other Chromium-based browsers matching that version. Other browser engines have been engaged in standards discussions, so wider interoperability is expected over time. A polyfill is also in development for browsers lacking native support. _Track browser rollout details like this on daily.dev before betting layout styling on gap decorations._ ### What happened to the row-rule-outset and column-rule-outset CSS properties? Those properties were renamed to row-rule-inset and column-rule-inset, and setting them now insets the rules inward from the decoration edges instead of the previous outset behavior. New longhand properties were also added, including row-rule-inset-cap, row-rule-inset-junction, row-rule-inset-start, and row-rule-inset-end (with column equivalents), enabling independent control of caps, junctions, and start/end insets. _Developers adopting gap decorations can follow syntax renames like this via daily.dev to avoid outdated code._ ### How do I stop gap decoration rules from appearing next to empty grid cells? Use the rule-visibility-items property set to around, which only paints gap decorations when at least one side of the gap has content. This prevents a rule line from dangling into empty space, such as in the last row of a grid where trailing cells are empty, keeping the layout visually clean. _Save practical fixes like this for grid layout edge cases with daily.dev while building out CSS decorations._ ## Similar posts on daily.dev - [Gap decorations: Now available in Chromium](https://daily.dev/posts/gap-decorations-now-available-in-chromium-x5qkzadan) · Chrome Developers · 69 upvotes · 3 comments - [Let’s Play With Gap Decorations\! – Master.dev Blog](https://daily.dev/posts/let-s-play-with-gap-decorations-master-dev-blog-jdy3kct2r) · Frontend Masters · 20 upvotes · 1 comments - [Responsive Separator for Horizontal List](https://daily.dev/posts/responsive-separator-for-horizontal-list-qpctryaiz) · CSS Tip · 10 upvotes · 0 comments - [Chris’ Corner: Stage 2](https://daily.dev/posts/chris-corner-stage-2-hhk2y4qdx) · CodePen · 1 upvotes · 0 comments - [7 Game-Changing Web UI Features You Can Start Using Today](https://daily.dev/posts/7-game-changing-web-ui-features-you-can-start-using-today-lanxczirv) · Amit Merchant · 2 upvotes · 0 comments --- Tags: [#css](https://daily.dev/tags/css) [View this post on daily.dev](https://daily.dev/posts/gap-decorations-are-now-available-here-s-what-s-new-8ahsqtdo9) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Gap Decorations Are Now Available, Here’s What’s New","url":"https://daily.dev/posts/gap-decorations-are-now-available-here-s-what-s-new-8ahsqtdo9","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/gap-decorations-are-now-available-here-s-what-s-new-8ahsqtdo9"},"datePublished":"2026-08-03T15:56:15.322Z","dateModified":"2026-09-14T08:31:21.993Z","description":"CSS gap decorations are now fully supported in Chrome and Edge 149+, enabling developers to style gaps between grid and flexbox items without hacks. The...","image":"https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/07/gap-decorations-thumb.jpg","thumbnailUrl":"https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/07/gap-decorations-thumb.jpg","isAccessibleForFree":true,"articleSection":"CSS-Tricks","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"CSS-Tricks","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/css_tricks","url":"https://daily.dev/sources/css_tricks"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/gap-decorations-are-now-available-here-s-what-s-new-8ahsqtdo9","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":24},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"css","timeRequired":"PT9M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"CSS-Tricks","item":"https://daily.dev/sources/css_tricks"},{"@type":"ListItem","position":3,"name":"Gap Decorations Are Now Available, Here’s What’s New"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/gap-decorations-are-now-available-here-s-what-s-new-8ahsqtdo9#faq","mainEntity":[{"@type":"Question","name":"What browsers support CSS gap decorations and starting from which version?","acceptedAnswer":{"@type":"Answer","text":"CSS gap decorations are fully supported in Chrome and Edge starting with version 149, with the implementation rolling out across other Chromium-based browsers matching that version. Other browser engines have been engaged in standards discussions, so wider interoperability is expected over time. A polyfill is also in development for browsers lacking native support. Track browser rollout details like this on daily.dev before betting layout styling on gap decorations."}},{"@type":"Question","name":"What happened to the row-rule-outset and column-rule-outset CSS properties?","acceptedAnswer":{"@type":"Answer","text":"Those properties were renamed to row-rule-inset and column-rule-inset, and setting them now insets the rules inward from the decoration edges instead of the previous outset behavior. New longhand properties were also added, including row-rule-inset-cap, row-rule-inset-junction, row-rule-inset-start, and row-rule-inset-end (with column equivalents), enabling independent control of caps, junctions, and start/end insets. Developers adopting gap decorations can follow syntax renames like this via daily.dev to avoid outdated code."}},{"@type":"Question","name":"How do I stop gap decoration rules from appearing next to empty grid cells?","acceptedAnswer":{"@type":"Answer","text":"Use the rule-visibility-items property set to around, which only paints gap decorations when at least one side of the gap has content. This prevents a rule line from dangling into empty space, such as in the last row of a grid where trailing cells are empty, keeping the layout visually clean. Save practical fixes like this for grid layout edge cases with daily.dev while building out CSS decorations."}}]} ```