CSS border-spacing Property

Definition and Usage

The border-spacing property sets the distance between the borders of adjacent cells in a table. It applies only when border-collapse is separate.

One length sets both horizontal and vertical gaps. Two lengths set horizontal first, then vertical. The initial value is 0. It applies to table and inline-table elements, and it is inherited. For Flexbox or Grid, use gap instead.

CSS Syntax

One non-negative length for both axes, or two lengths: horizontal then vertical. Negative values are invalid.

Property Values

How to Use border-spacing

Use the separate border model, then set how far cell borders sit apart.

1. Build a real <table> (or an element with display: table).
2. Set border-collapse: separate. Spacing does nothing in the collapse model.
3. Give cells a visible border so the gaps are easy to see.
4. Set border-spacing to one length, or two lengths for horizontal then vertical.

Live Preview

The table stays in the separate model. Change border-spacing and watch the gaps update.

CSS Examples

Each snippet uses a small table with border-collapse: separate. Use Try It Yourself for a live editor.

<style>
  table {
    border-collapse: separate;
    border-spacing: 10px;
  }

  td {
    border: 2px solid #2563eb;
    padding: 8px;
  }
</style>

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

<style>
  table {
    border-collapse: separate;
    border-spacing: 5px 15px;
  }

  td {
    border: 2px solid #2563eb;
    padding: 8px;
  }
</style>

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

<style>
  table {
    border-collapse: separate;
    border-spacing: 0;
  }

  td {
    border: 2px solid #2563eb;
    padding: 8px;
  }
</style>

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

Key Takeaways