How CSS border-spacing Sets Table Cell Gutters

The CSS border-spacing property controls the distance between the borders of adjacent table cells, commonly referred to as cell gutters, in an uncollapsed table model. This article explains how border-spacing operates, the prerequisite conditions required for it to work, its syntax for horizontal and vertical gutter control, and how it handles spacing around the outer edges of a table.

The Prerequisite: The Separated Borders Model

The border-spacing property only functions when a table uses the separated borders model. This requires the border-collapse property to be set to separate, which is the default behavior in HTML tables:

table {
  border-collapse: separate; /* Required for border-spacing to take effect */
}

If a table is configured with border-collapse: collapse;, adjacent cell borders merge into single lines, and the browser completely ignores any border-spacing declarations.

Defining Single vs. Dual Axis Gutters

The border-spacing property accepts either one or two length values (such as px, em, or rem):

Single Value: Applying one length sets uniform gutters both horizontally and vertically.
```
table {
  border-spacing: 10px; /* 10px gap horizontally and vertically */
}
```
Two Values: Applying two lengths separates the axes. The first value defines the horizontal spacing (gutters between columns), and the second value defines the vertical spacing (gutters between rows).
```
table {
  border-spacing: 15px 5px; /* 15px column gutter, 5px row gutter */
}
```

Percentages and negative values are invalid for border-spacing.

Behavior at Table Edges

Unlike the gap property used in CSS Grid or Flexbox, border-spacing applies to both the interior cell-to-cell gaps and the perimeter gaps. The space defined by border-spacing appears:

Between neighboring cells in adjacent columns and rows.
Between the outer boundary of the table element and the outermost cells along the perimeter.

Any background color or background image applied to the <table> element will show through these gutter areas, while cell backgrounds remain confined within their respective cell borders.