1. css
  2. /properties
  3. /border-collapse

border-collapse

Definition

The border-collapse property is a CSS property that sets the border collapsing behavior of a table. It is used specifically with the table element.

Examples

This will create a table with a solid, 1 pixel wide, red border and cells with solid, 1 pixel wide, blue borders. The cells will be separated by the blue borders:

<style>
  table {
    border: 1px solid #ff0000;
  }
  td {
    border: 1px solid #0000ff;
  }
</style>

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

This will create a table with a solid, 1 pixel wide, red border and cells with solid, 1 pixel wide, blue borders. The cells will be separated by the red border, which will be collapsed to a single border:

<style>
  table {
    border: 1px solid #ff0000;
    border-collapse: collapse;
  }
  td {
    border: 1px solid #0000ff;
  }
</style>

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

This will create a table with a solid, 1 pixel wide, red border and cells with solid, 1 pixel wide, blue borders. The cells will be separated by the blue borders, and the red border will not be collapsed:

<style>
  table {
    border: 1px solid #ff0000;
    border-collapse: separate;
  }
  td {
    border: 1px solid #0000ff;
  }
</style>

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

Values

ValueDescription
collapseBorders are collapsed into a single border. This is the default value.
separateBorders are separated, with each cell having its own border.
initialSets the border-collapse to its default value.
inheritThe element inherits the border-collapse value from its parent element.
unsetThe element's border-collapse is set to the value specified in the user agent's style sheet, if any. If there is none, it will be the default value.

Best Practices

  • Use the border-collapse property in conjunction with the border property to fully define the borders of a table.
  • Consider the layout and design of your table when deciding whether to use the collapse or separate value.
  • Use the collapse value if you want to create a more compact and streamlined layout for your table.
  • Use the separate value if you want to create a more traditional table layout with individual cell borders.
  • Keep in mind that the border-collapse property only affects the borders of the cells in a table and not the border of the table itself. To set the border of the table, you can use the border property.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes