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?

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: 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: 