CSS Reference Property

border-collapse

The border-collapse property is used to specify the border model of a table. It specifies whether the borders of the table and its table cells should be “joined” or separated.

When borders are separate, the table and each of its table cells can have their own distinct borders, and there is space between them. You can control the amount of space between borders of adjacent table cells using the border-spacing property.

When borders are “collapsed”, adjacent table cells share borders, and the cells at the edges of the table share their borders with the borders of the table itself.

bordercollapse
The two tables in the image are identical, except that their border model is specified using the border-collapse property. See the Live Demo section below for a live example.

Trivia & Notes

In the collapsed border model, the border-style value of inset behaves like groove, and outset behaves like ridge. See the border-style property entry for more information.

Official Syntax

  • Syntax:

    border-collapse: collapse | separate | inherit  
  • Initial: separate
  • Applies To: elements with ‘table’ and ‘inline-table’ display
  • Animatable: no

Values

separate
Use the separated borders model. The table and its cells all have distinct borders.
collapse
Use the collapsed borders model. The table and table cells’ borders are joined and shared between them.
inherit
Inherits the same border model from its parent.

Examples

table {
    border-collapse: collapse;
}

table.stats {
    border-collapse: separate;
}
                

Live Demo

Have a look at the live demo:

View this demo on the Codrops Playground

Browser Support

The border-collapse property is supported in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.

Further Reading

Written by

Last updated February 4, 2015 at 2:30 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.