CSS border-collapse Property

What You’ll Learn

The border-collapse property controls how table cell borders interact. It helps you choose between merged borders and spaced, separate borders.

Definition and Usage

The border-collapse CSS property is used to control the spacing and border styling of table elements. It determines how the borders of adjacent table cells are combined or kept separate.

This property can help create cleaner and more compact table layouts by specifying how adjacent borders should interact. Most data tables on the web use collapse for a tidy grid look.

📝 Syntax

The syntax for border-collapse is simple. It is applied to the <table> element and accepts two keyword values.

table {

  border-collapse: collapse | separate;

}

Basic Example

table {

  border-collapse: collapse;

  width: 100%;

}

th, td {

  border: 1px solid black;

  padding: 8px;

}

Here, value can be either collapse or separate.

Syntax Rules

• The initial value is separate.
• Only applies to table and inline-table elements.
• With collapse, adjacent cell borders merge into one shared line.
• With separate, each cell keeps its own border box.
• border-spacing only works when the value is separate.

Default Value

The default value of border-collapse is separate. This means the borders of table cells are rendered as distinct and separate from each other unless you change the property.

💎 Property Values

The border-collapse property accepts two keyword values.

Table Elements Only

border-collapse only affects real table layout. It does not change how borders behave on regular div grids or flex layouts.

collapse vs separate

Examples Gallery

Try border-collapse with collapsed borders, separate borders, spacing, and a styled data table.

<style>

  table {

    border-collapse: collapse;

    width: 100%;

  }

  th, td {

    border: 1px solid black;

    padding: 8px;

    text-align: center;

  }

  th {

    background-color: #f2f2f2;

  }

</style>



<table>

  <tr><th>Header 1</th><th>Header 2</th></tr>

  <tr><td>Data 1</td><td>Data 2</td></tr>

  <tr><td>Data 3</td><td>Data 4</td></tr>

</table>

<style>

  table {

    border-collapse: separate;

    width: 100%;

  }

  th, td {

    border: 1px solid black;

    padding: 8px;

    text-align: center;

  }

</style>



<table>

  <tr><th>Header 1</th><th>Header 2</th></tr>

  <tr><td>Data 1</td><td>Data 2</td></tr>

</table>

table {

  border-collapse: separate;

  border-spacing: 8px;

  width: 100%;

}

td {

  border: 1px solid #2563eb;

  padding: 8px;

  background: #eff6ff;

  text-align: center;

}

.data-table {

  border-collapse: collapse;

  width: 100%;

  font-size: 0.875rem;

}

.data-table th, .data-table td {

  border: 1px solid #cbd5e1;

  padding: 0.65rem;

  text-align: left;

}

.data-table th {

  background: #1e293b;

  color: #fff;

}

.data-table tr:nth-child(even) td {

  background: #f8fafc;

}

💡 Best Practices