CSS border-collapse Property
Example
Set the collapsing borders model for two tables:
#table1 {
border-collapse: separate;
}
#table2 {
border-collapse: collapse;
}
Try it Yourself »
More "Try it Yourself" examples below.
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. Read about animatable |
| Version: | CSS2 |
| JavaScript syntax: | object.style.borderCollapse="collapse" Try it |
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. | Demo ❯ |
| collapse | Borders are collapsed into a single border when possible (border-spacing and empty-cells properties have no effect) | Demo ❯ |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
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;
}
Try it Yourself »
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;
}
Try it Yourself »
Related Pages
CSS tutorial: CSS Table
HTML DOM reference: borderCollapse property
