CSS border-collapse property

CSS border-collapse Property

The border-collapse property in CSS is used to control the layout of table borders. It specifies whether the borders of adjacent cells in a table should be collapsed into a single border or remain separated with space between them. This property is most commonly used in <table> elements.

1. Syntax

selector {
  border-collapse: value;
}

Accepted Values:

• collapse

• separate

2. Accepted Values

Value	Description	Example
collapse	Collapses adjacent table cell borders into a single border. This is the default value for most table elements.	border-collapse: collapse;
separate	Keeps the borders of adjacent cells separate, with space between them (you can adjust the spacing with border-spacing).	border-collapse: separate;

3. Example – Using collapse

When border-collapse: collapse; is used, all adjacent table cell borders are collapsed into a single border:

table {
  border-collapse: collapse;
}

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

✅ In this example, the table cells will have shared borders, with no space between the cells.

4. Example – Using separate

When border-collapse: separate; is used, table cells retain their own borders, with space between them:

table {
  border-collapse: separate;
  border-spacing: 10px;  /* Add space between cells */
}

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

✅ The table cells will have separate borders with 10px space between them (as specified by border-spacing).

5. Example – Using border-spacing with separate

The border-spacing property works only when border-collapse: separate; is applied. It defines the space between the borders of adjacent cells:

table {
  border-collapse: separate;
  border-spacing: 15px;  /* Space between table cells */
}

<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 15px space between each cell in the table.

6. Best Practices

✔ Use border-collapse: collapse; when you want a clean, unified border design for your table.
✔ Use border-collapse: separate; when you want to have space between table cells and a more distinct look.
✔ Adjust border-spacing when using separate to control the space between cells.