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

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 (ff_views, safari_views) at time of generation. Check the live entry for the latest signal.