The border-collapse CSS property sets whether cells inside a <table> have shared or separate borders.

/* Keyword values */ border-collapse: collapse; border-collapse: separate;  /* Global values */ border-collapse: inherit; border-collapse: initial; border-collapse: revert; border-collapse: unset; 

border-collapse

The border-collapse CSS property sets whether cells inside a <table> have shared or separate borders.

When cells are collapsed, the border-style value of inset behaves like groove, and outset behaves like ridge.

When cells are separated, the distance between cells is defined by the border-spacing property.

Syntax

/* Keyword values */ border-collapse: collapse; border-collapse: separate;  /* Global values */ border-collapse: inherit; border-collapse: initial; border-collapse: revert; border-collapse: unset; 

The border-collapse property is specified as a single keyword, which may be chosen from the list below.

Values

collapse

Adjacent cells have shared borders (the collapsed-border table rendering model).

separate

Adjacent cells have distinct borders (the separated-border table rendering model).

Formal definition

Initial value	separate
Applies to	table and inline-table elements
Inherited	yes
Computed value	as specified
Animation type	discrete

Formal syntax

collapse | separate

Examples

A colorful table of browser engines

HTML

<table class="separate">   <caption><code>border-collapse: separate</code></caption>   <tbody>     <tr><th>Browser</th> <th>Layout Engine</th></tr>     <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td></tr>     <tr><td class="ed">Edge</td> <td class="tr">EdgeHTML</td></tr>     <tr><td class="sa">Safari</td> <td class="wk">Webkit</td></tr>     <tr><td class="ch">Chrome</td> <td class="bk">Blink</td></tr>     <tr><td class="op">Opera</td> <td class="bk">Blink</td></tr>   </tbody> </table> <table class="collapse">   <caption><code>border-collapse: collapse</code></caption>   <tbody>     <tr><th>Browser</th> <th>Layout Engine</th></tr>     <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td></tr>     <tr><td class="ed">Edge</td> <td class="tr">EdgeHTML</td></tr>     <tr><td class="sa">Safari</td> <td class="wk">Webkit</td></tr>     <tr><td class="ch">Chrome</td> <td class="bk">Blink</td></tr>     <tr><td class="op">Opera</td> <td class="bk">Blink</td></tr>   </tbody> </table> 

CSS

.collapse {   border-collapse: collapse; }  .separate {   border-collapse: separate; }  table {   display: inline-table;   margin: 1em;   border: dashed 5px; }  table th, table td {   border: solid 3px; }  .fx { border-color: orange blue; } .gk { border-color: black red; } .ed { border-color: blue gold; } .tr { border-color: aqua; } .sa { border-color: silver blue; } .wk { border-color: gold blue; } .ch { border-color: red yellow green blue; } .bk { border-color: navy blue teal aqua; } .op { border-color: red; } 

Result

Specifications

Specification
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification # propdef-border-collapse

See also

border-spacing, border-style The border-collapse property alters the appearance of the <table> HTML element. Select your preferred language English (US)DeutschEspañolFrançais日本語한국어Polski中文 (简体) Change language