CSS border-collapse Property

Description

The border-collapse CSS property is used to control the spacing and overlapping of adjacent table borders in HTML documents. It is particularly relevant when styling tables with borders. When set to "collapse," it ensures that borders between table cells merge into a single border, creating a neater and more compact appearance. This property simplifies table design and improves visual consistency by eliminating any gaps or spacing between cell borders, resulting in a cleaner and more cohesive table layout. Conversely, when set to "separate," each table cell retains its own border, which can lead to a more spaced-out and segmented look for the table.

Initial value

seperate

Applies to

'table' and 'inline-table' elements

Inherited

Yes

Computed value

As specified

Animatable

No

JavaScript syntax

object.style.borderCollapse

Interactive Demo

border-collapse: collapse;

border-collapse: separate;

Syntax

border-collapse: collapse | separate

Values

• collapseIs a keyword requesting the use of the collapsed-border table rendering model.
• seperateIs a keyword requesting the use of the separated-border table rendering model.

Example

<table class="test"> 

   <caption>border-collapse: collapse;</caption> 

   <tr> 

      <th>Name</th> <th>Price</th> 

   </tr> 

   <tr> 

      <td>Item 1</td> <td>Value 1</td> 

   </tr> 

   <tr> 

      <td>Item 2</td> <td>Value 2</td> 

   </tr> 

</table> 

<table class="test2"> 

   <caption>border-collapse: separate;</caption> 

   <tr> 

      <th> Name </th> <th> Price </th> 

   </tr> 

   <tr> 

      <td>Item 1</td> <td>Value 1</td> 

   </tr> 

   <tr> 

      <td>Item 2</td> <td>Value 2</td> 

   </tr> 

</table> 

table {
   width: 80%;
   margin: 20px;
}
td, th {
   border: 1px solid blue;
}
.test {
   border-collapse: collapse; 
}
.test2 {
   border-collapse: separate; 
}

Browser Support

The following table will show you the current browser support for the CSS border-collapse property.

Desktop
12	1	1	4	1.2

Tablets / Mobile
18	4	10.1	3	1	2.2

Last updated by CSSPortal on: 1st January 2024