CSS Gap Decorations: Dividers Without Borders or Pseudo-Elements

Every list on this site is separated by a hairline, and every one of those hairlines is a compromise. You either put a border-bottom on each row and then fight to remove it from the last one, or you reach for ::after with an absolutely positioned line, or you nest a divider element that exists purely to be one pixel tall. Gap decorations, shipped in Chrome and Edge 149, make all of that unnecessary.

The design is the part I like: rather than invent a new syntax, it extends column-rule (which has existed for multi-column layout for years) to work in grid and flexbox, then adds row-rule as its counterpart. The shorthand takes width, style, and color, exactly like border, so there is nothing new to learn.

.row-list {
  display: grid;
  gap: 1.5rem;
  row-rule: 1px solid var(--color-hairline);
}

That draws a line in each gap, which means N items produce N-1 dividers. No last-child override, no off-by-one, no pseudo-element. There are also row-rule-inset and column-rule-inset properties for pulling the line back from the edges of the gap, which is how you get the inset dividers that most design systems actually want. Critically, the decorations are purely visual: they do not participate in layout or change spacing, so you can add them to an existing grid without anything shifting.

The caveat is the obvious one. This is Chromium 149 only right now, not Baseline, so Firefox and Safari users see no line at all. That makes it a progressive enhancement rather than a migration: keep the borders you have, or accept that the divider is decorative and let it be absent. I am holding off on ripping out my own hairlines until Firefox lands it, but this is the first time in a while that a new CSS property has replaced a hack I actively resented.