CSS 'border-collapse' Property Explained

The CSS 'border-collapse' property specifies whether table borders should collapse into a single border or be separated as in standard HTML. This property is essential for controlling the appearance of tables on web pages, allowing for cleaner, more integrated designs or ensuring that each cell's borders are distinctly defined.

CSS 'border-collapse' Property Examples

See the Pen CSS 'border-collapse' Property by Webzstore (@webzstore) on CodePen.

The 'border-collapse' property offers a simple yet powerful way to influence the layout and appearance of tables in CSS, enhancing both the functionality and aesthetic appeal of data presentation on web pages.

Browser Support For 'border-collapse' Property

Source: MDN browser-compat-data 8.1.4, checked 3 October 2026. Prefixed support and implementations that were later removed are not counted, and some browsers list partial support or extra values. See the MDN reference for border-collapse for the full compatibility details, including mobile browsers.

CSS Syntax of the 'border-collapse' Property

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

Usage of the 'border-collapse' Property

Use 'border-collapse' when you need to define the border behavior of tables. It's particularly useful for styling tables in a way that matches the overall design of a site or application. By collapsing borders, you can create a more seamless look, whereas separated borders can help define each cell more clearly for better readability.

Property Values of the 'border-collapse' Property

• Collapse: Causes table borders to collapse into a single border, eliminating in-between spaces.
• Separate: Keep table borders separate, with each cell displaying its own borders.
• Initial: Resets the 'border-collapse' to its default value (separate for most browsers).
• Inherit: Inherits the 'border-collapse' property from the table's parent element.