CSS border-spacing Property

What You’ll Learn

The border-spacing property controls the gap between table cell borders. It is the CSS way to add breathing room inside HTML tables when borders stay separate.

Definition and Usage

The border-spacing CSS property sets the distance between the borders of adjacent cells in a table. This gives you control over how much space appears between cells without changing the cell border width itself.

It is especially useful for card-like tables, comparison grids, and layouts where you want visible gaps between bordered cells. Pair it with cell borders on th and td for the best visual result.

📝 Syntax

The syntax for border-spacing accepts one or two length values on the <table> element.

table {
  border-spacing: <length> <length>?;
}

Basic Example

table {
  border-spacing: 10px 15px;
  border: 1px solid black;
}
td {
  border: 1px solid gray;
  padding: 10px;
}

The first length sets horizontal spacing. The optional second length sets vertical spacing. If only one value is given, it applies to both axes.

Syntax Rules

• The initial value is 0 — no gap between cell borders.
• Only applies to table and inline-table elements.
• Requires border-collapse: separate (the default) to take effect.
• Values must be non-negative lengths such as px, em, or rem.
• Spacing is added between border boxes, not inside cell padding.

Default Value

The default value of border-spacing is 0, meaning there is no extra space between the borders of adjacent cells unless you set a length.

💎 Property Values

The border-spacing property accepts length values and global keywords.

Horizontal vs Vertical Spacing

When you pass two values, the first controls horizontal gaps and the second controls vertical gaps between cell borders.

border-spacing vs border-collapse

Examples Gallery

Try border-spacing with two-value syntax, single-value spacing, zero vs spaced comparisons, and a card-style table.

<style>
  table {
    border-spacing: 10px 15px;
    border: 1px solid black;
  }
  td {
    border: 1px solid gray;
    padding: 10px;
  }
</style>

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

<style>
  table {
    border-collapse: separate;
    border-spacing: 12px;
    width: 100%;
    max-width: 18rem;
  }
  td {
    border: 1px solid #2563eb;
    padding: 8px;
    background: #eff6ff;
    text-align: center;
  }
</style>

<table>
  <tr><td>A</td><td>B</td></tr>
  <tr><td>C</td><td>D</td></tr>
</table>

.no-gap {
  border-collapse: separate;
  border-spacing: 0;
}
.with-gap {
  border-collapse: separate;
  border-spacing: 16px;
}
td {
  border: 1px solid #64748b;
  padding: 6px;
  text-align: center;
}

table {
  border-collapse: separate;
  border-spacing: 6px;
  width: 100%;
  max-width: 20rem;
}
td {
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.75rem;
  background: #fff;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

💡 Best Practices