CSS border-collapse Property

Definition and Usage

The border-collapse property chooses how borders look inside a table: shared lines (collapse) or separate cell borders (separate).

Set it on the table (or inline-table), not on each cell. It is inherited. The initial value is separate. With separate, gaps come from border-spacing. With collapse, that spacing is ignored.

CSS Syntax

Property Values

How to Use border-collapse

Build a real table, give cells a border, then pick the border model on the table.

1. Use a <table> with rows and cells (not a flex or grid fake table).
2. Set a visible border on th and td.
3. Set border-collapse on the table.
4. If you chose separate and want gaps, add border-spacing.

Live Preview

Same table, same cell borders. Switch between collapse and separate to see shared lines versus distinct edges.

CSS Examples

Each snippet keeps CSS lean: a table, cell borders, and border-collapse. Use Try It Yourself for a live editor.

<style>
  table {
    border-collapse: collapse;
  }

  th,
  td {
    border: 1px solid black;
  }
</style>

<table>
  <tr>
    <th>Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>Ada</td>
    <td>92</td>
  </tr>
  <tr>
    <td>Lin</td>
    <td>88</td>
  </tr>
</table>

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

  th,
  td {
    border: 1px solid black;
  }
</style>

<table>
  <tr>
    <th>Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>Ada</td>
    <td>92</td>
  </tr>
  <tr>
    <td>Lin</td>
    <td>88</td>
  </tr>
</table>

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

  th,
  td {
    border: 1px solid black;
  }
</style>

<table>
  <tr>
    <th>Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>Ada</td>
    <td>92</td>
  </tr>
  <tr>
    <td>Lin</td>
    <td>88</td>
  </tr>
</table>

Key Takeaways