The **`border-collapse property** is used to set the collapsing border models of a table. 

# Syntax

The syntax of the `border-collapse` property is as follows:

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

# Possible values

The `border-collapse property can take the following values:

* **Separate:** This is the default value. Borders are separate. Each cell will have its own border
* **Collapse:** Borders are combined into a single border for all cells (where possible)
* **Initial:** Sets border spacing to the default value
* **Inherit:** Inherits border-spacing from its parent element 

# Example

The snippet below shows the difference between `separate` and `collapse` border models in CSS:

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

#table1 {
  border-collapse: separate;
}

#table2 {
  border-collapse: collapse;
}
</style>
</head>
<body>

<h2>border-collapse: separate (default)</h2>
<table id="table1">
  <tr>
    <th>Name</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Ahmad</td>
    <td>Pakistan</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>USA</td>
  </tr>
</table>

<h2>border-collapse: collapse</h2>
<table id="table2">
  <tr>
    <th>Name</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Ahmad</td>
    <td>Pakistan</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>USA</td>
  </tr>
</table>

</body>
</html>


codemirror

What is border-collapse property in CSS?

Used to set a table's collapsing border model, with values: separate, collapse, initial, inherit.