border-collapse

Summary

The border-collapse CSS property selects a table's border model. This has a big influence on the look and style of the table cells.

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 value separate
  • Applies to table and inline-table elements
  • Inherited yes
  • Media visual
  • Computed value as specified
  • Animatable no
  • Canonical order the unique non-ambiguous order defined by the formal grammar

Syntax

Formal syntax: collapse | separate
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.

Examples

View Live Examples

th, td { border: solid 1px red; }
table { border-collapse: collapse; }
border-collapse: separate
Browser Layout Engine
Internet Explorer Trident
Firefox Gecko
Opera Presto
Safari WebKit
border-collapse: collapse
Browser Layout Engine
Internet Explorer Trident
Firefox Gecko
Opera Presto
Safari WebKit

Specifications

Specification Status Comment
CSS Level 2 (Revision 1) Recommendation  

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 ? 1.0 (1.9.2) ? ? ?

See also

Document Tags and Contributors

Last updated by: SiddharthBhatt,
Hide Sidebar