CSS border-spacing property

CSS border-spacing Property

The border-spacing property in CSS is used to define the space between the borders of adjacent table cells. It only applies when border-collapse is set to separate (which is the default behavior for tables).

1. Syntax

table {
  border-spacing: length [length];
}

Value Options:

• length: Specifies the spacing between adjacent table cell borders. You can use units like px, em, %, etc.

• inherit: Inherits the border-spacing value from the parent element.

• 0: Removes the space between borders.

💡 You can specify one or two values:

• If one value is given: Apply equal spacing horizontally and vertically.

• If two values are given: The first value sets the horizontal spacing, and the second value sets the vertical spacing.

2. Example – Setting Uniform border-spacing

table {
  border-spacing: 10px; /* 10px space between adjacent borders */
  border: 2px solid black;
}
td {
  border: 1px solid blue;
  padding: 10px;
}

<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>

✅ Each cell will have 10px space between its adjacent borders (both horizontally and vertically).

3. Example – Different Horizontal and Vertical border-spacing

table {
  border-spacing: 20px 10px; /* 20px horizontal, 10px vertical */
  border: 2px solid black;
}
td {
  border: 1px solid green;
  padding: 10px;
}

✅ The horizontal spacing between cells will be 20px, while the vertical spacing will be 10px.

4. Example – Removing Space Between Table Borders

If you want to remove the space between table cells, use border-spacing: 0; or set border-collapse: collapse;.

table {
  border-spacing: 0;
  border-collapse: collapse; /* Best practice for removing spacing */
  border: 2px solid black;
}
td {
  border: 1px solid red;
  padding: 10px;
}

✅ This removes all spacing between table cells, making the borders appear as a single solid line.

5. border-spacing vs. border-collapse

Property	Effect
border-spacing	Controls the space between table cell borders when border-collapse: separate.
border-collapse	Merges cell borders when set to collapse, making border-spacing ineffective.

💡 If you set border-collapse: collapse;, the the border-spacing property will have no effect.

6. Best Practices

✔ Use border-spacing when you want cell borders to be separate and spaced out.
✔ Use border-collapse: collapse; when you want borders to merge into a single border.
✔ Combine with padding to adjust the spacing inside table cells.