Home >CSS >CSS reference – properties, selectors, functions >border-spacing

border-spacing

border-spacing: length [length]

Sets the gap between neighboring table cells and between the outer cells and the edge of the table. It applies only to separate borders (border-collapse: separate). One value applies to both directions, two values are the horizontal and the vertical gap.

Values

0 – the cells touch, the borders stay double (each cell has its own).
8px – a gap of 8 px in all directions.
12px 4px – 12 px horizontally, 4 px vertically.

Initial value: 0 (a table has 2px from the browser). Inherited: yes. Applies to: tables with border-collapse: separate.

Examples

Cells as separate tiles – a larger horizontal gap, a smaller vertical one:

<table class="tiles">
  <tr><td>Mon</td><td>Tue</td><td>Wed</td></tr>
  <tr><td>8 h</td><td>6 h</td><td>7 h</td></tr>
</table>

.tiles {
  width: 220px;
  border-spacing: 8px 4px;
}
.tiles td {
  padding: 6px;
  background: #e3f2fd;
  text-align: center;
}

result

Mon	Tue	Wed
8 h	6 h	7 h

Things to watch out for

The gap is also between the outer cells and the edge of the table – it cannot be set only inside. The outer gap can be offset with a negative margin of the table (margin: -8px).
Percentages are not allowed and negative values are invalid.
It is set on the table. It does nothing on cells – the gap between cells is set only by the value of the table.
With border-collapse: collapse the gap is not used.

Browser support

Baseline – widely available: works in all major browsers and has for a long time (since 2015 at the latest). Since version: Chrome 1, Firefox 1, Safari 1. As of October 2026 (MDN browser-compat-data).