v149 · css · shipped

CSS Gap Decorations

Style the gaps in Grid and Flexbox layouts the way you can already style gutters in multi-column layout. Adds row-rule and extends column-rule to every gap-aware container.

at a glance

Shipped in	Chrome 149 (desktop + Android)
Status	Enabled by default
Flag	None
Standards position	WebKit: support · Mozilla: support (see browsers below)
Spec	CSS Gaps Module Level 1 (W3C CSSWG editor's draft)
Explainer	MicrosoftEdge / MSEdgeExplainers / CSSGapDecorations
ChromeStatus	5157805733183488 — CSS Gap Decorations

Status disagreement, both sides reported rather than resolved (fetched 2026-10-07): this page says "Enabled by default" and lists "Chrome 149 (desktop + Android)" under "Shipped in", while the ChromeStatus feature record reports "In development" for Chrome, with desktop and Android targeted at 149. Neither side is adjudicated here.

why it exists

Until Chrome 149, web authors styled gaps in Grid and Flexbox layouts with hacks: nested backgrounds, fake borders on every item, or absolutely positioned overlays. column-rule in multi-column layout already lets you draw a line in each gutter; gap decorations brings the same primitive to every gap-aware layout and adds row-rule for horizontal gaps.

Source: chromestatus motivation field.

the properties

Three groups, mirroring the existing column-rule shorthand. row-rule is brand new. rule is a higher-level shorthand that sets both at once.

column-rule

column-rule	Shorthand: `<width> <style> <color>`
`column-rule-color`	Colour of the rule drawn in column gaps
`column-rule-style`	One of `solid \| dashed \| dotted \| double \| groove \| ridge \| inset \| outset \| none \| hidden`
`column-rule-width`	Width of the rule, e.g. `2px`, `thin`, `medium`
`column-rule-break`	Whether the rule breaks across grid lines or runs continuous
`column-rule-inset`	Inset from the gap edges (per-side variants exist)

row-rule

row-rule	Shorthand: `<width> <style> <color>`
`row-rule-color`	Colour of the rule drawn in row gaps
`row-rule-style`	Same vocabulary as `column-rule-style`
`row-rule-width`	Width of the rule
`row-rule-break`	Whether the rule breaks at intersections or runs continuous
`row-rule-inset`	Inset from the gap edges

rule (shorthand)

`rule`	Sets both `column-rule` and `row-rule` at once.
`rule-color` / `rule-style` / `rule-width`	Per-axis if you split. Otherwise applies to both axes.

Source: CSS Gaps Module Level 1 §3 property index.

live example

The grid below has a 3px solid blue rule in column gaps and a 3px dashed emerald rule in row gaps. View source on this page to inspect the CSS.

.demo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;

  column-rule: 3px solid #0022ff;
  row-rule:    3px dashed #0a8f5c;
}

recipes

One rule for every gap

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  rule: 2px solid currentColor;
}

Inset the rule so it doesn't touch the children

.toolbar {
  display: flex;
  gap: 0.75rem;
  column-rule: 1px solid #aaa;
  column-rule-inset: 0.25rem;
}

Different rules per axis

.cards {
  display: grid;
  gap: 1rem;
  column-rule: 1px dotted oklch(70% 0.02 240);
  row-rule: 2px solid oklch(50% 0.18 30);
}

browser support

Chrome	149 (desktop + Android)
Edge	149 (Chromium)
Firefox	Public support (no ship date yet)
Safari	Public support (no ship date yet)

Source: chromestatus browser views (Firefox position, Safari position) at time of generation. Check the live entry for the latest signal.