border-collapse

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

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 ridge, and outset behaves like groove.

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

Try it

border-collapse: collapse;

border-collapse: separate;

<section class="default-example" id="default-example"> <table class="transition-all" id="example-element"> <tbody> <tr> <td>Cell 1.1</td> <td>Cell 1.2</td> </tr> <tr> <td>Cell 2.1</td> <td>Cell 2.2</td> </tr> <tr> <td>Cell 3.1</td> <td>Cell 3.2</td> </tr> </tbody> </table> </section>

table { width: 15rem; table-layout: fixed; } td { border: 5px solid; border-color: crimson dodgerblue orange limegreen; padding: 0.75rem; }

Syntax

css

/* Keyword values */ border-collapse: collapse; border-collapse: separate; /* Global values */ border-collapse: inherit; border-collapse: initial; border-collapse: revert; border-collapse: revert-layer; 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

border-collapse = 
 separate |
 collapse

Examples

A colorful table of browser engines

HTML

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

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 # propdef-border-collapse

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on ⁨Nov 17, 2025⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content