border-collapse property CSS Reference

Definition and Usage

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 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

th, td { border: solid 1px red; }
table { border-collapse: collapse; }

Compatibility

Desktop browsers

Mobile browsers