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.
Usages
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" |
Syntax
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 |
Examples
The example below shows to sets border-collapse property.
.one {
border-collapse: separate;
}
.two {
border-collapse: collapse;
}
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.