CSS border-collapse attribute

Definition and Usage

The border-collapse property sets whether the table borders are merged into a single border or displayed separately as in standard HTML.

See Also:

CSS Tutorial:CSS Tables

HTML DOM Reference Manual:borderCollapse Property

Example

Set the merge border model for the table:

table
  {
  border-collapse:collapse;
  }

Try It Yourself

CSS Syntax

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

Property Value

Value Description
separate Default Value. Borders will be separated. The border-spacing and empty-cells properties will not be ignored.
collapse If possible, the borders will be merged into a single border. The border-spacing and empty-cells properties will be ignored.
inherit Specifies that the border-collapse property should inherit its value from the parent element.

Technical Details

Default Value: separate
Inheritance: yes
Version: CSS2
JavaScript Syntax: object.style.borderCollapse="collapse"

More Examples

Merge Table Borders
This example demonstrates whether the table borders are displayed as a single border or displayed separately as in standard HTML.

Browser Support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
1.0 5.0 1.0 1.2 4.0