CSS border-collapse property specifies whether the two borders of a table cell should collapse into a single border table cell or not.
Notice the difference between the two tables:
In the above image, the first table has its border-collapse property set to its default value separate. Therefore, two borders appear around each cell. While the second table has its border-collapse property set to collapse. Therefore, the two borders in the second table collapsed into one and each table cell has only a single border around it.
Try out the example below to see how it works:
Example:
.table1{
border-collapse: separate; /* Default Value */
}
.table2{
border-collapse: collapse;
}
CSS Syntax
The border-collapse property has the following syntax:
border-collapse: separate|collapse|initial|inherit;
Property Values
The border-collapse property accepts the following values:
| separate | Each border cell displays its own border, therefore, two borders appear around each cell. This is the default value. |
| collapse | The two border around each cell collapses into a single border. Therefore, only a single border appears around each cell of the table. |
| initial | Sets the border-collapse property to its default value(separate). |
| inherit | Inherits the border-collapse property from its parent element. |
General Info
| Default Value | separate |
| Inherited | Yes |
| JavaScript Usage | element.style.borderCollapse = “collapse” |
