CSS border-collapse Property

CSS border-collapse property specifies whether the cell borders of a table are collapsed in a single border or separated as in standard HTML.


The following table outline the usages and version history of this property.

Default value: separate
Applies to: Table elements
Inherited: Yes
Version: CSS2
JavaScript Syntax: object.style.borderCollapse = "collapse"


Here is a syntax for the CSS border-collapse property

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

Property Values

The following table describes the values of this property.

Value Description
separate Default. Borders are separated each cell and it will display its own borders
collapse Borders are collapsed into a single border
initial Sets default value of this property
inherit Inherits this property from its parent element


The example below shows to sets border-collapse property.

.one {
  border-collapse: separate;
.two {
  border-collapse: collapse;

Run it...   »

Browser Compatibility

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

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.