border-collapse

The border-collapse CSS property specifies whether a table's borders are separated or collapsed. In the separated-border model, adjacent cells each have their own distinct borders. In the collapsed-border model, adjacent cells share borders.

border-collapse: collapse;
border-collapse: separate;
border-collapse: inherit;

In the separated-border model only, the distance between cells is defined by the border-spacing property.

In the collapsed-border model only, the border-style value of inset behaves like groove, and outset behaves like ridge.

Initial valueseparate
Applies totable and inline-table elements
Inheritedyes
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

Values

separate
Adjacent cells have distinct borders (the separated-border table rendering model). Default value.
collapse
Adjacent cells have shared borders (the collapsed-border table rendering model).

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 Status Comment
CSS Level 2 (Revision 1)
The definition of 'border-collapse' in that specification.
Recommendation Initial definition

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 (Yes) 1.0 (1.7 or earlier) 5.0 4.0 1.2 (125)
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 2.3 (Yes) 1.0 (1.9.2) 7.0 11 3.0

Document Tags and Contributors

 Last updated by: mfluehr,