CSS border-collapse Property

Example

Set the collapsing borders model for two tables:

#table1 {
  border-collapse: separate;
}

#table2 {
  border-collapse: collapse;
}

Definition and Usage

The border-collapse property sets whether table borders should collapse into a single border or be separated as in standard HTML.

Default value:	separate
Inherited:	yes
Animatable:	no.
Version:	CSS2
JavaScript syntax:	object.style.borderCollapse="collapse"

• Inherited : "Inherited = yes" means that it can takes (inherit) it's value from it's parent element.
• object - object in javascript means the element on which border-collapse is applied.
• Animatable - "Animatable = no" means that it cannot be animated with CSS @keyframes.

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
border-collapse	1.0	5.0	1.0	1.2	4.0

CSS Syntax

border-collapse: separate|collapse|initial|inherit;

Property Values

Value	Description	Demo
separate	Borders are separated; each cell will display its own borders. This is default.
collapse	Borders are collapsed into a single border when possible (border-spacing and empty-cells properties have no effect)
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

More Examples

Example

When using "border-collapse: separate", the border-spacing property can be used to set the space between the cells:

#table1 {
  border-collapse: separate;
  border-spacing: 10px;
}

Example

When using "border-collapse: collapse", the cell that appears first in the code will "win":

table, td, th {
  border: 3px solid red;
}

#table1 {
  border-collapse: collapse;
  border-color: blue;
}