border-collapse

Summary

Border-collapse can be used for collapsing the borders between table cells

Overview table

Initial value

separate

Applies to

Table and inline-table elements

Inherited

Yes

Media

visual

Computed value
:

Animatable

No

CSS Object Model Property

borderCollapse

Syntax

• border-collapse: collapse
• border-collapse: inherit
• border-collapse: separate

Values

separate

Default. Borders are detached (standard HTML). Each table cell has an individual border, with optional space between the borders.

collapse

Adjacent borders and the space between them are collapsed into a single border.

inherit

The same specified value as the property for the element’s parent will be used.

Examples

An example of border-collapse ‘collapse’ and ‘seperate’ table borders are red, cell borders are blue

/**
 * @author  Vivienne van Velzen
 * @see     http://code.webplatform.org/gist/6948189
 */

table {
    border-color: #F00;
    border-collapse: seperate; /* default */
}
td {
    border-color: #00F;
}
table.collapse {
    border-collapse: collapse;
}
p {
    margin: 15px 0 3px 0;
}
td p {
    margin: 3px;
}

View live example

Related specifications

CSS 2.1, section 17.6. Borders

Recommendation

CSS 3, section 8. Borders

Editor’s Draft

See also

Related articles

Tables

• border-collapse

• border-spacing

• caption-side

• empty-cells

• Tables

• col

• colgroup

• table

• tbody

• td

• tfoot

• th

Other articles

• css/properties/border

Attributions

• Microsoft Developer Network: [Windows Internet Explorer API reference Article]