demo · v149

Border vs rule: the shared-edge problem

When grid cells have border, adjacent cells share an edge — you get a double line. CSS gap decorations (column-rule / row-rule on a grid) draw a single line inside the gap, so shared edges collapse to one line automatically. This page puts both side by side and zooms in on the shared-edge artefact.

column-rule on grid: ?
cell borders — double lines at shared edges
A
B
C
D
E
F
G
H
I
gap-rule (column-rule / row-rule) — single lines
A
B
C
D
E
F
G
H
I

Zoomed in on the shared edge (2×2 cells):

cell borders

A
B
C
D
Shared edge = 4px (two 2px borders stack)

gap-rule

A
B
C
D
Single 2px line in the gap — no doubling

Border approach — shared-edge problem

.grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.cell { border: 2px solid black; }

/* Problem: adjacent cells share an edge
   → visible as 4px double line */

Gap-rule approach — no doubling

.grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
  column-rule: 2px solid black;  /* Chrome 149+ */
  row-rule:    2px solid black;
}
/* Rule draws once in the gap — no cell markup */

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗