CSS border-collapse property

CSS border-collapse property defines whether table borders are separated or collapsed into a single border.

When cells are collapsed, adjacent borders merge into a single border. When cells are separated, the distance between them is specified by the border-spacing property.

Initial Value	separate
Applies to	Table and inline-table elements.
Inherited	No.
Animatable	No.
Version	CSS2
DOM Syntax	object.style.borderCollapse = "collapse";

Syntax

Syntax of CSS border-collapse property

css

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

Example of the border-collapse property:

Example of CSS border-collapse property with collapse value

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      table {
        border-collapse: collapse;
      }
      table,
      th,
      td {
        border: 1px solid #cccccc;
      }
      thead {
        background-color: #1c87c9;
        color: #ffffff;
      }
      th {
        height: 50px;
        text-align: center;
      }
      td {
        padding: 3px 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-collapse property example</h2>
    <p>Here the "collapse" value is set for the border-collapse property.</p>
    <table>
      <thead>
        <tr>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Result

In the example below, you can see that when border-collapse: separate is used, the border-spacing property defines the space between cells. When border-collapse: collapse is used, border-spacing has no effect.

Example of the border-collapse property with the "separate" and "collapse" values:

Example of CSS border-collapse property with separate value

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      table,
      td,
      th {
        border: 1px solid #ccc;
      }
      thead {
        background-color: #1c87c9;
        color: #ffffff;
      }
      th {
        height: 30px;
        text-align: center;
      }
      td {
        padding: 3px 10px;
      }
      #table1 {
        border-collapse: separate;
        border-spacing: 10px;
      }
      #table2 {
        border-collapse: collapse;
        border-spacing: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Border-collapse property example</h1>
    <h2>border-collapse: separate;</h2>
    <p>When using the "border-collapse: separate", the border-spacing property can be used to define the space between the cells.</p>
    <table id="table1">
      <thead>
        <tr>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
      </tbody>
    </table>
    <h2>border-collapse: collapse;</h2>
    <p>When using the "border-collapse: collapse", the border-spacing property has no effect.</p>
    <table id="table2">
      <thead>
        <tr>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Values

Value	Description
separate	Each cell has its own borders. This is the default value. The border-spacing property controls the distance between cells.
collapse	Cells share their borders. Adjacent borders merge into a single border.
initial	Sets the property to its default value.
inherit	Inherits the property from its parent element.
unset	Resets the property to its initial value.

Practice

What does the 'border-collapse' property of CSS do?

It defines the space between cells in a table.It lets you decide whether the table borders should collapse into a single border or display as separate borders.It adjusts the size of the table.It is used to specify the color of the table borders.It determines the style for the four borders of a table cell.

CSS border-collapse property ​

Syntax ​

Example of the border-collapse property: ​

Result ​

Example of the border-collapse property with the "separate" and "collapse" values: ​

Values ​