CSS border-collapse Property
Topic: CSS3 Properties ReferencePrev|Next
Description
The border-collapse CSS property specifies whether the cell borders of a table are collapsed in a single border or separated as usual.
There are two distinct models for setting borders on table cells in CSS.
Separated border model
In this model, each table cell has an individual border.
Distance between the borders of adjoining cells given by the border-spacing property.
Note: In the separated borders model only cells (and the table itself) can have borders; rows, columns, row groups, and column groups cannot.
Collapsing border model
In the collapsing borders model, adjacent table cells share borders.
Note: In the collapsing border model, it is possible to specify borders that surround all or part of a cell, row, row group, column, and column group.
The border-collapse property selects a table's border model. The value separate selects the separated border model. The value collapse selects the collapsing border model.
The following table summarizes the usages context and the version history of this property.
| Default value: | separate |
|---|---|
| Applies to: | The table and inline-table elements |
| Inherited: | Yes |
| Animatable: | No. See animatable properties. |
| Version: | CSS 2, 3 |
Syntax
The syntax of the property is given with:
The example below shows the border-collapse property in action.
Example
Try this code »table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
}Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
separate |
Selects the separated borders model. This is default value. |
collapse |
Selects the collapsing borders model. The border-spacing and empty-cells properties will be ignored. |
initial |
Sets this property to its default value. |
inherit |
If specified, the associated element takes the computed value of its parent element border-collapse property. |
Browser Compatibility
The border-collapse property is supported in all major modern browsers.
 |
Basic Support—
|
Further Reading
See tutorial on: CSS Border, CSS3 Border.
Table-related properties: border-spacing, empty-cells, table-layout.
