Border-spacing - CSS Property

Syntax diagram of border-spacing.

Syntax diagram of the border-spacing property.
The links in the diagram provide more details about the values.

In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:

• length is a numeric value followed by one of CSS dimension units.
• The value can appear once or twice in the syntax with a separating space.

Description of the border-spacing property.

border-spacing sets the space between the cells of a table. This property only has an effect if border-collapse has the value separate.

Around the edge of the table, the space between the cells adds to the table's inner margins (padding).

The browser might need to change the table's dimensions or the cell sizes to apply the value of border-spacing.

Values for border-spacing.

• border-spacing: 5px;

  A positive or zero value, followed by a unit of measurement (see CSS dimension units). The space between the table cells will be set to this value.
  Percentages are not allowed.

  border-spacing:5px;
• border-spacing: 5px 10px;

  Two positive or zero values, followed by their unit of measurement.
  The first value sets the horizontal space between two adjacent cells in the table, and the second sets the vertical space.

  border-spacing:15px 5px;
• border-spacing: initial; (0) border-spacing: inherit; border-spacing: revert; border-spacing: revert-layer; border-spacing: revert-rule; border-spacing: unset;

  Common values ​​are presented on these pages: initial, inherit, revert, revert-layer, revert-rule, unset.

Animation of the border-spacing property.

border-spacing can be animated, but the animation might not be very smooth because it involves heavy calculations across the entire table. Also, the elements that come after the table need to be repositioned based on the table's growing or shrinking, which slows down the animation even more. To avoid this second issue, the table below has been set to absolute positioning.

Access the border-spacing property via a program

Adjusting the spacing of table cells with JavaScript.

In JavaScript, here's how to change the spacing of cells in a table. There are two possible syntaxes: the first uses an array-like notation, with the property name written in kebab-case, the second uses an object syntax and the property name is written in camel-case.

let el = document.getElementById('id'); el.style['border-spacing'] = '3mm'; // or let el = document.getElementById('id'); el.style.borderSpacing = '3mm';

With Javascript, read the value of border-spacing.

The property must have been applied directly to the element itself via its style attribute, not through a CSS selector.

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

With Javascript, read the computed value of border-spacing.

The computed value is the one that comes from evaluating the relative units and possibly taking inherited values into account. If not, the computed value will be the property's initial value (0 in the case of border-spacing).

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

With JQuery, read or change the value of border-spacing.

JQuery also offers two syntaxes, shorter than those of Javascript.


// Read the value:
$('#id').prop('border-spacing');
// Write the value:
$('#id').prop('border-spacing', '3mm');
$('#id').prop('{border-spacing': '3mm'});


With JQuery, read the computed value of border-spacing.

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

Other examples.

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

Test it yourself.

The buttons below apply the entered value to the border-spacing property and then display either the value as it was applied or the computed value. This second option allows you to see how the value of border-spacing is stored (serialized). In particular, you’ll notice that all units are converted to pixels.

Simulator.

Browsers compatibility with border-spacing.

No compatibility issues to report. The border-spacing property is well supported by all current browsers.

1

border-spacing
property

Estimated overall support.

96%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Safari

Safari sur IOS

Opéra

Samsung Internet

Chrome

Edge

Firefox

Chrome pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Historic of the border-spacing property.

• Cascading Style Sheets Level 2 - Revision 1 Specification

  This level 2 of the specification describes the mechanism of cascading styles in CSS. This language is used to format HTML or XML documents. It supports media-specific style sheets so that authors can adapt the presentation of their documents for visual browsers, auditory devices, printers, braille devices, portable devices, etc.

  Regarding border-spacing Introduction of the border-spacing property in CSS version 2.xx.
  

  November 04, 1997

  Working Draft.

  

  March 24, 1998

  Proposed for recommendation.

  

  May 11, 1998

  Recommendation .

• CSS Table Module Level 3

  This specification module defines a table-based layout system, optimized for the rendering of tabular data. In this layout model, each cell is assigned to an intersection between a set of consecutive rows and a set of consecutive columns, which are themselves generated from the structure of the table and sized according to their content.

  Regarding border-spacing No change regarding the border-spacing property.
  

  October 25, 2016

  Working Draft.

  

  

  

See also, about tables.

The W3C specification "CSS Table Module" brings together definitions specifically concerning the formatting of tables, but many more general properties can also apply to tables or parts of tables: dimensions, margins, etc.

Properties: