CSS border-collapse Property

CSS border-collapse

The border-collapse property in CSS specifies whether the borders of a table are collapsed into a single border or separated as in standard HTML. This property is primarily used for styling table elements.

Syntax of border-collapse

</>

Copy

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

Values

Value	Description
`separate`	Borders are detached and displayed separately. This is the default value.
`collapse`	Borders are collapsed into a single border, removing any space between table cells.
`initial`	Sets the property to its default value (`separate`).
`inherit`	Inherits the value from its parent element.

Default Value

separate

Examples for border-collapse

Using the CSS border-collapse Property

The following examples demonstrate how to use the border-collapse property to style table borders.

</>

Copy

/* Use the default separate borders */
.table1 {
  border-collapse: separate;
}

/* Collapse the borders into a single border */
.table2 {
  border-collapse: collapse;
}

/* Inherit the border-collapse value from the parent */
.table3 {
  border-collapse: inherit;
}

Example of Collapsed Borders

Below is an example demonstrating how to use border-collapse: collapse to remove the spacing between table borders:

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  table {
    width: 50%;
    border: 1px solid black;
  }

  .collapsed {
    border-collapse: collapse;
  }

  td, th {
    border: 1px solid black;
    text-align: left;
    padding: 8px;
  }
</style>
</head>
<body>

<h2>Collapsed Table Borders</h2>

<table class="collapsed">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>30</td>
  </tr>
</table>

</body>
</html>

Example of Separated Borders

border-collapse: separate;

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  table {
    width: 50%;
    border: 1px solid black;
  }

  .separated {
    border-collapse: separate;
  }

  td, th {
    border: 1px solid black;
    text-align: left;
    padding: 8px;
  }
</style>
</head>
<body>

<h2>Separated Table Borders</h2>

<table class="separated">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>30</td>
  </tr>
</table>

</body>
</html>

Browser Support

The border-collapse property is supported in modern browsers. Below is a compatibility table:

Browser	Version
Chrome	1.0
Edge	5.0
Firefox	1.0
Safari	1.2
Opera	4.0

TutorialKart

CSS border-collapse Property