CSS GUIDE BORDER COLLAPSE

This document is a work in progress and is subject to change.

Summary

The border-collapse property is used to make the border collapse. This has a big influence on the look and style of the table cells.
The rendering of table borders is divided into two categories in CSS2 - "collapsed" and "separated". This property specifies which border rendering mode to use. In the collapsed border model, adjacent table cells share borders.
In the separated model, adjacent cells each have their own distinct borders (the distance between them given by the 'border-spacing' property.)

Inherited: Yes
Initial : seperate
Media  : Visual

Syntax

border-collapse: value

Legal Values

Value	Description
inherit	Explicitly sets the value of this property to that of the parent.
collapse	Use the "collapsed borders" rendering model
seperate	Use the "separated borders" rendering model

Usage Examples

table border="1" style="border-collapse: collapse" bordercolor="#111111" width="500"

table border="1" style="border-collapse: separate" bordercolor="#111111" width="500"

Notes

In the "collapsed border" rendering model, the 'border-style' value of "inset" behaves like "groove", and "outset" behaves like "ridge." CSS2 specifies that the initial value for this property is "collapse", but CSS2.1 and Mozilla/Opera all state or behave such that the initial value is "separate."

Specification Conformance

CSS1 Conformance: Browsers are allowed to treat values of dotted, dashed, groove, ridge, inset, outset and double as the value solid.

Browser Compatibility

Browser Compatibility: IE 4+ / NN 4+

See Also

CSS Schema
CSS Border-Collapse property
Borderstyle CSS1 Reference