border-collapse

border-collapse chooses a table’s border model. Separate keeps each cell’s border; collapse shares adjacent edges.

Compare both border models

Both tables give every cell a 2px border. Collapse produces one shared edge rather than two separate edges. Border-spacing only affects the separate table.

HTML and CSS

HTML

<table class="separate">
  <caption>
    Separate borders
  </caption>
  <thead>
    <tr>
      <th scope="col">Topic</th>
      <th scope="col">Minutes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">HTML</th>
      <td>20</td>
    </tr>
    <tr>
      <th scope="row">CSS</th>
      <td>30</td>
    </tr>
  </tbody>
</table>
<table class="collapse">
  <caption>
    Collapsed borders
  </caption>
  <thead>
    <tr>
      <th scope="col">Topic</th>
      <th scope="col">Minutes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">HTML</th>
      <td>20</td>
    </tr>
    <tr>
      <th scope="row">CSS</th>
      <td>30</td>
    </tr>
  </tbody>
</table>

CSS

th,
td {
  border: 2px solid #2563eb;
  padding: 0.5rem;
  text-align: left;
}
caption {
  text-align: left;
  font-weight: bold;
}
table {
  margin-block: 1rem;
}
.separate {
  border-collapse: separate;
  border-spacing: 6px;
}
.collapse {
  border-collapse: collapse;
}

Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.

Use a compact data table

Headers retain their table semantics while CSS makes the shared grid compact. A caption identifies the data.

HTML and CSS

HTML

<table class="">
  <caption>
    Practice sessions
  </caption>
  <thead>
    <tr>
      <th scope="col">Topic</th>
      <th scope="col">Minutes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">HTML</th>
      <td>20</td>
    </tr>
    <tr>
      <th scope="row">CSS</th>
      <td>30</td>
    </tr>
  </tbody>
</table>

CSS

th,
td {
  border: 2px solid #2563eb;
  padding: 0.5rem;
  text-align: left;
}
caption {
  text-align: left;
  font-weight: bold;
}
table {
  margin-block: 1rem;
}
table {
  border-collapse: collapse;
  width: 100%;
}
thead {
  background: #eff6ff;
}

Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.

Values and defaults

The initial value is separate and the property is inherited. Apply it to a table or inline-table. Collapsed borders use a conflict-resolution algorithm: hidden suppresses a shared edge, wider borders generally win, and style/origin rules resolve further ties. They are not simply two borders added together. Inset behaves like ridge and outset like groove in this model.

Common mistakes

Border-spacing and empty-cells do not work as they do in the separate model. Border-radius on collapsed table parts is not a reliable way to round the grid. Collapse changes painting, not table semantics; use th and scope for actual headers rather than bold td elements.

Learn border-spacing, table-layout, and the table element.

Sources and browser support

MDN: border-collapse describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.