Border-collapse - Property CSS

border-collapse

Summary of characteristics of the `border-collapse` property

Quick description

How table cells are framed.

Status

Standard

Usable for

HTML

Predefined values

separate | collapse

Percentages

Not applicable.

Initial value

separate

Inherited by default

Yes.

Animation type

Discrète : during an animation, the border-collapse property passes from one value to another without transition.

W3C Module

CSS Table Module

References (W3C)

🡇

🡅

CSS Table Module Level 3

Document status: WD (Working Draft)

Cascading Style Sheets Level 2 - Revision 1 Specification

Document status: REC (Recommendation)

Syntax diagram of `border-collapse`.

Syntax diagram of the border-collapse property
Click on the diagram for more details on the values

Description of the `border-collapse` property.

The border-collapse property defines whether the cells in an array are joined or separated by a space. The width of the latter can be specified with border-spacing .

In the case where a border is defined, if the cells are next to each other, the border strokes are merged, which is not the case if we simply specify a spacing equal to zero ( border-spacing:0px; ).

Zero-width space with
border-spacing:0;

Borders adjoining with
border-collapse:collapse;

Note! When border-collapse is set to collapse, the padding of the array (padding) are cancelled. On the other hand, the collapse value can give an unsightly result with borders with a 3D effect (inset, ridge, etc).

Values for `border-collapse`.

border-collapse: separate;

Default. The cells are framed separately from each other. See also the border-spacing property to manage the value of the spacing between cells.
border-collapse: collapse;

The borders of two adjacent cells are merged. The border-spacing property has no effect.

Global values
(common to all properties):


border-collapse: initial  (separate)
border-collapse: inherit
border-collapse: revert
border-collapse: revertLayer
border-collapse: unset

See the following pages for more details: initial, inherit, revert, revert-layer, unset.

Animation of the `border-collapse` property.

Animating border-collapse is possible with a sudden switch from one value to another. But the interest of animating this property seems quite limited.

Using Javascript to manipulate `border-collapse`.

Change the value of `border-collapse` with Javascript.

In Javascript, two syntaxes are accepted to modify the value of border-collapse: the first with the property name written in the typical CSS notation kebab-case (border-collapse), and the second one that uses camel-case notation (borderCollapse).


	let el = document.getElementById('id');
	el.style['border-collapse'] = 'collapse';
	// or
	let el = document.getElementById('id');
	el.style.borderCollapse = 'collapse';

Read with Javascript the value of `border-collapse`.

The code given below explores the style attribute of HTML. In other words, it retrieves the value of border-collapse suppose that it was assigned via this style attribute and not via a CSS selector.


	let el = document.getElementById('id');
	let value = el.style['border-collapse'];
	// or
	let el = document.getElementById('id');
	let value = el.style.borderCollapse;

Read the computed value of `border-collapse` with Javascript.

The computed value is the result of the valuation of the cascade of inheritances. This can be the value given to the element's property, either via its style attribute or via a CSS selector, an inherited value, or the initial value of border-collapse. The computed value is always set.


	let el = document.getElementById('id');
	let value = window.getComputedStyle(el).getPropertyValue('border-collapse');

Change the value of the `border-collapse` property with JQuery.

As in Javascript, the kebab-case and camel-case notations are both recognized.


 $('#id').css('border-collapse', 'collapse');
 // or
 $('#id').css('borderCollapse', 'collapse');

Read the computed value of `border-collapse` with JQuery.


	let value = $('#id').css('border-collapse');

Other code samples.

Many more examples of Javascript and JQuery code are given on the Javascript and CSS page.

Test it yourself.

Here you can test how the calculated value is rendered. The buttons below apply the entered value to the border-collapse property and then display either the value as that it has been applied, either the computed value. This second option allows you to see how the value of border-collapse is serialized. But in the case of border-collapse it won't make a difference.

Interactive example.

border-style :

border-collapse :

separate

collapse

browsers compatibility.

The border-collapse property is well supported by all current browsers.

Column 1

Support for border-collapse property to collapse table cells.

border-collapse
property

Estimated overall support.

96%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

`border-collapse` property historic.

Cascading Style Sheets Level 2 - Revision 1 Specification

Introduction of the border-collapse property in the CSS version 2.xx specification.

November 04, 1997
Working Draft.
March 24, 1998
Proposed for recommendation.
May 11, 1998
Recommendation .
CSS Table Module Level 3

No change about then border-collapse property.

October 25, 2016
Working Draft.