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

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

---

Compatibility

Desktop browsers

Mobile browsers