CSS - border-spacing

The border-spacing CSS property specifies the distance between the borders of adjacent table cells (only for the separated borders model). This is equivalent to the cellspacing attribute in presentational HTML, but an optional second value can be used to set different horizontal and vertical spacing.

Example

 

View Live Examples

CSS
table { border-spacing: 10px 5px; }

Syntax  

CSS
/* border-spacing: length */
border-spacing: 2px;

/* border-spacing: horizontal vertical */
border-spacing: 1% 2em;

border-spacing: inherit;

Values

length
Is a <length> value that describes both the horizontal and vertical spacings between cells. It is used only in the one-value syntax.
horizontal
Is a <length> value that describes the horizontal spacing between cells, that is the space between cells in adjacent columns. It is used only in the two-value syntax.
vertical
Is a <length> value that describes the vertical spacing between cells, that is the space between cells in adjacent rows. It is used only in the two-value syntax.
inherit
Is a keyword indicating that the calculated value of border-spacing of the parent's element must be used.

Formal syntax

CSS
<a href="css/length" title="Possible values: a number followed by'em', 'ex', 'ch', 'rem', 'px', 'cm', 'mm', 'in', 'vh', 'vw', 'vmin', 'vmax', 'pt', 'pc' or 'px', like 3px, 1.5cm, -0.5em or 0"><length></a> <a href="css/length" title="Possible values: a number followed by'em', 'ex', 'ch', 'rem', 'px', 'cm', 'mm', 'in', 'vh', 'vw', 'vmin', 'vmax', 'pt', 'pc' or 'px', like 3px, 1.5cm, -0.5em or 0"><length></a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a>

Description  

The border-spacing CSS property specifies the distance between the borders of adjacent table cells (only for the separated borders model). This is equivalent to the cellspacing attribute in presentational HTML, but an optional second value can be used to set different horizontal and vertical spacing.

The border-spacing value is also used along the outside edge of the table, where the distance between the table's border and the cells in the first/last column or row is the sum of the relevant (horizontal or vertical) border-spacing and the relevant (top, right, bottom, or left) padding on the table.

This property applies only when border-collapse is separate.

Initial value0
Applies totable and inline-table elements
Inheritedyes
Mediavisual
Computed valuetwo absolute lengths
Animatableno
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser Compatibility  

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.0 (1.7 or earlier) 8.0 4.0 1.0 (85)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? 1.0 (1.9.2) ? ? ?

Specifications  

Specification Status Comment
CSS Level 2 (Revision 1)
The definition of 'border-spacing' in that specification.
Recommendation Initial definition

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/border-spacing

CSS CSS Property CSS Tables Reference