Border-collapse - Property CSS

Syntax diagram of border-collapse.

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; ).

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.

• 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.

browsers compatibility.

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

1

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.

  

  

  

See also, on the subject of tables.

The specification of the W3C CSS Table Module includes the definitions specifically for arrays, But many more general properties can apply to tables margins, colors, etc., or to cells: dimensions, etc.

Properties:

border-spacing

The spacing between adjacent cells in a table, when they are not merged.

caption-side

Positions the title of a table.

empty-cells

Defines whether empty cells in a table should be displayed (borders, background color and image, and so on).

table-layout

Defines how the column widths of a table are calculated when not explicitly specified.