{"slug": "gap-decorations-now-available-in-chromium", "title": "Gap decorations: Now available in Chromium", "summary": "CSS gap decorations are now available in Chrome and Edge starting in version 149, allowing developers to style gaps between grid, flexbox, and multi-column layouts without using borders or pseudo-elements. The feature introduces new properties like `row-rule` and `column-rule`, along with controls for decoration breaks, insets, and support for the `repeat()` syntax to vary styles across gaps. This collaboration between Microsoft Edge and Google Chrome teams eliminates previous workarounds that affected accessibility, performance, and maintainability.", "body_md": "Published: May 15, 2026\nCSS gap decorations are available in Chrome and Edge starting in version 149. Style the gaps between grid, flexbox, and multi-column layouts without using borders or pseudo-elements. This feature was built in collaboration between the Microsoft Edge and Google Chrome teams.\nThe problem\nStyling gaps between layout items has always required workarounds. Borders on individual items, pseudo-elements, background hacks. These approaches have costs:\n- They depend on structure. Adding a visual separator means changing your markup or writing selectors for specific items.\n- They interfere with accessibility. Extra DOM elements show up in the accessibility tree when they shouldn't.\n- They're hard to maintain. Responsive layouts break the assumptions your gap styling was built on.\n- They hurt performance. More DOM nodes, more layout work.\n- They have poor authoring ergonomics. Complex geometric calculations were often needed to get things working correctly.\nThe column-rule\nproperty handles gap decorations for multi-column layouts, but grid and flexbox previously lacked equivalent functionality.\nThe solution\nGrid and flexbox containers now accept column-rule\n. A new row-rule\nproperty handles horizontal gaps. These decorations are purely visual and don't affect existing layouts. If you use the column-rule\nproperty in multi-column layouts, existing behavior remains the same.\nFor example, here is a flex container with three panels using a list of styles for its column and row rules:\n.flex-split {\ncolumn-rule-width: 2px;\ncolumn-rule-style: dashed, solid;\ncolumn-rule-color: #d4d0c8;\n}\nAs illustrated in this example, both row-rule\nand column-rule\naccept the\nsame shorthand for width, style, and color. Use the rule\nshorthand to set both\nat once.\nNew properties\nHowever, we didn't just bring column-rule\nto other layout modes and add the\nrow\ncounterpart. We also introduced controls for fine-tuning your decorations:\nhow they break at intersections, how far they inset from gap edges, when they\nappear relative to items, and how to vary styles across gaps. Rule width, color,\nand insets are all animatable too.\nThe repeat()\nsyntax\nGap decorations support repeat()\nfor their width, style, and color values. This lets you vary decorations across gaps in short form, similar to the repeat()\nsyntax used for track definitions in grid:\n.settings-panel {\nrow-rule: 1px solid #243352;\nrow-rule-width: repeat(2, 1px), 4px;\n}\nThis gives the first two row gaps a 1px rule and the third a 4px rule, cycling if there are more gaps than values. You can also pass multiple values directly without repeat()\n. For example, alternating row rule styles for hour and half-hour boundaries in a calendar:\n.calendar {\nrow-rule-width: 2px, 1px;\nrow-rule-style: solid, dashed;\nrow-rule-color: #e8e4df, #f0ece7;\n}\nControl decoration breaks\nThe column-rule-break\nand row-rule-break\nproperties control how decorations behave at gap intersections:\nnormal\n(default): Behavior depends on the type of container. More information is in the specification.none\n: Decorations run continuously through intersections.intersection\n: Decorations break where row and column gaps cross.\nFor example, if you set rule-break\nto intersection\nin a grid container, rules break at gap intersections rather than continuing through:\n.dashboard {\ncolumn-rule-style: solid;\ncolumn-rule-color: #fbbf24, #34d399;\ncolumn-rule-width: 1px, 3px;\ncolumn-rule-break: intersection;\nrow-rule: 1px solid #1e1e36;\n}\nIf you set rule-break\nto none\n, the rules run continuously through intersections:\n.grid {\ncolumn-rule: 1px solid #5a9e9e;\nrow-rule: 1px solid #c27a6b;\nrule-break: none;\n}\nYou can try this value in the interactive playground.\nExtend or shrink decorations\nThe column-rule-inset\nand row-rule-inset\nproperties control how far decorations extend within a gap. You can set insets on all sides at once with the shorthand, or target insets asymmetrically with column-rule-inset-cap\n(for endpoints that have no crossing gaps) and column-rule-inset-junction\n(for endpoints that intersect with other gaps).\nValues can be lengths, percentages, or the overlap-join\nkeyword, which joins gap decorations into corners. For example, setting rule-inset to 5px shrinks all decorations inwards 5px:\n.container {\ndisplay: flex;\nflex-wrap: wrap;\ncolumn-rule: 1px solid #2a2a45;\ncolumn-rule-color: #60a5fa, #34d399, #a78bfa;\nrule-inset: 5px;\nrow-rule: 1px solid #2a2a45;\n}\nSetting rule-inset-cap\nto 0px and rule-inset-junction\nto 10px gives\ndecorations that are flush at container edges but inset at intersections. The\ndashboard demo shown earlier uses this approach, and the insets animate on\nhover:\n.dashboard {\nrule-inset-cap: 0px;\nrule-inset-junction: 10px;\ntransition: rule-inset-junction 0.4s;\n}\n.dashboard:hover {\nrule-inset-junction: 0px;\n}\nVisibility\nThe column-rule-visibility-items\nand row-rule-visibility-items\nproperties control when rules appear based on item adjacency:\nnormal\n(default): Depends on container type.all\n: Rules appear in every gap, even empty ones.around\n: Rules appear wherever there are one or more adjacent items.between\n: Rules appear only between two adjacent items.\nThe rule-visibility-items\nshorthand sets both at once.\nSetting rule-visibility-items\nto between\nwill show rules only between\nadjacent items:\nsection {\nrule: 2px solid black;\nrule-visibility-items: between;\n}\nOn the other hand, setting rule-visibility-items\nto all\nwill show rules in\nevery gap, even those without adjacent items:\nsection {\nrule: 2px solid black;\nrule-visibility-items: all;\n}\nToggle the value in the live demo to see the difference!\nAnimate decorations\nRule width, color, and insets are animatable. You can transition them on hover or any other state change. The dashboard demo shown earlier transitions rule colors and insets on hover:\n.dashboard {\ncolumn-rule-color: #fbbf24, #34d399;\nrule-inset-junction: 10px;\ntransition: column-rule-color 0.4s, rule-inset-junction 0.4s;\n}\n.dashboard:hover {\ncolumn-rule-color: #3b82f6, #3b82f6;\nrule-inset-junction: 0px;\n}\nDemos\nAll demos shown in this post are available at the Edge demo site.\nThe developer trial blog post includes several more demos, including an interactive playground, a burger menu, a notebook layout, and a magazine-style layout with a sudoku grid.\nChanges since the developer trial\nIf you tried gap decorations during the developer trial (Chrome 139), note the following changes:\n- The feature is available by default; no flags are needed.\n- Some property names were updated to align with the latest specification (for example,\ncolumn-rule-outset\nandrow-rule-outset\nbecamecolumn-rule-inset\nandrow-rule-inset\n). - The\ncolumn-rule-visibility-items\nandrow-rule-visibility-items\nproperties were added. - Animation support was added.\nUse gap decorations today\nGap decorations work in Chrome and Edge, starting with version 149. If your gap decorations are purely decorative, the feature is a progressive enhancement; in browsers without support, gaps render normally with no visible decorations. A polyfill is in development for browsers that don't yet have support.\nFile bugs at the Chromium issue tracker. For more background, see the CSS Gap Decorations specification.", "url": "https://wpnews.pro/news/gap-decorations-now-available-in-chromium", "canonical_source": "https://developer.chrome.com/blog/gap-decorations-stable?hl=en", "published_at": "2026-05-15 07:00:00+00:00", "updated_at": "2026-05-24 05:08:25.376542+00:00", "lang": "en", "topics": ["developer-tools", "products"], "entities": ["Chromium", "Chrome", "Edge", "Microsoft Edge", "Google Chrome"], "alternates": {"html": "https://wpnews.pro/news/gap-decorations-now-available-in-chromium", "markdown": "https://wpnews.pro/news/gap-decorations-now-available-in-chromium.md", "text": "https://wpnews.pro/news/gap-decorations-now-available-in-chromium.txt", "jsonld": "https://wpnews.pro/news/gap-decorations-now-available-in-chromium.jsonld"}}