CSS PROPERTIES
Expand All|Collapse All
CSS AT-RULES
SPONSORED LINKS

CSS border-collapse Property

Topic: CSS3 Properties Reference« Prev|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:

border-collapse separate | collapse | initial | inherit

The example below shows the border-collapse property in action.

  • 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.

Browsers Icon

Basic Support—

  • Firefox 1+
  • Google Chrome 1+
  • Internet Explorer 5+
  • Apple Safari 1.2+
  • Opera 4+
 

Warning:Always use the valid <!DOCTYPE> while using the border-collapse property, otherwise it may produce unexpected results.


Further Reading

See tutorial on: CSS Border, CSS3 Border.

Table-related properties: border-spacing, empty-cells, table-layout.

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.