CSS - border-collapse

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

Examples

View a standalone example

View Live 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="ie">Internet Explorer</td> <td class="tr">Trident</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="ie">Internet Explorer</td> <td class="tr">Trident</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 6px;
    border-width: 6px;
}
table th, table td {
    border: solid 3px;
}
.fx { border-color: orange blue; }
.gk { border-color: black red; }
.ie { 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

Syntax  

CSS
border-collapse: collapse;
border-collapse: separate;

border-collapse: inherit;

Values

separate
Is a keyword requesting the use of the separated-border table rendering model. It is the default value.
collapse
Is a keyword requesting the use of the collapsed-border table rendering model.

Formal syntax

CSS
collapse <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> separate

Description  

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

The separated model is the traditional HTML table border model. Adjacent cells each have their own distinct borders. The distance between them given by the border-spacing property.

In the collapsed border model, adjacent table cells share borders. In that model, 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
Animatableno
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser Compatibility  

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

Specifications  

Specification Status Comment
CSS Level 2 (Revision 1)
The definition of 'border-collapse' in that specification.
Recommendation Initial definition

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/border-collapse

CSS CSS Borders CSS Property CSS Tables Reference