CSS border-collapse Property

The border-collapse property sets how table borders display.

Possible values are separate and collapse.

By default, table borders are separate.

Example

#

A table with separate borders.

Fullname Age
Susan Doe 26
Vivian Grim 24
Kevin John 35
<style>
  .table-border-separate,
  .table-border-separate td,
  .table-border-separate th {
    border: 1px solid #302ea3;
    padding: 10px;
  }

  .table-border-separate {
    border-collapse: separate;
  }
</style>
<table class="table-border-separate">
  <tr>
    <th>Fullname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Susan Doe</td>
    <td>26</td>
  </tr>
  <tr>
    <td>Vivian Grim</td>
    <td>24</td>
  </tr>
  <tr>
    <td>Kevin John</td>
    <td>35</td>
  </tr>
</table>

Syntax

border-collapse: separate | collapse | initial | inherit;

Values

#

Value Description
separate Default. Separated borders and each cell having its own border.
collapse Collapses border into a single border when possible (border-spacing and empty-cells properties have no effect)
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different border-collapse values.

Fullname Age
Susan Doe 26
Vivian Grim 24
Kevin John 35
<style>
  .table-border-collapse,
  .table-border-collapse td,
  .table-border-collapse th {
    border: 1px solid #302ea3;
    padding: 10px;
  }

  .table-border-collapse {
    border-collapse: collapse;
  }
</style>
<table class="table-border-collapse">
  <tr>
    <th>Fullname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Susan Doe</td>
    <td>26</td>
  </tr>
  <tr>
    <td>Vivian Grim</td>
    <td>24</td>
  </tr>
  <tr>
    <td>Kevin John</td>
    <td>35</td>
  </tr>
</table>

Browser support

This table shows when border-collapse support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
5.0 Jul 2000
Opera
4.0 Jun 2000
Safari
1.2 Feb 2004

You may also like

Guides