This page is In Progress

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

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

Other articles

Attributions