border-spacing

The border-spacing CSS property specifies the distance between the borders of adjacent <table> cells. This property applies only when border-collapse is separate.

/* <length> */
border-spacing: 2px;
/* horizontal <length> | vertical <length> */
border-spacing: 1cm 2em;
/* Global values
border-spacing: inherit;
border-spacing: initial;
border-spacing: unset;

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.

Note: The border-spacing property is equivalent to the deprecated cellspacing <table> attribute, except that it has an optional second value which can be used to set different horizontal and vertical spacing.

Initial value	`0`
Applies to	`table` and `inline-table` elements
Inherited	yes
Media	visual
Computed value	two absolute lengths
Animation type	discrete
Canonical order	the unique non-ambiguous order defined by the formal grammar

Syntax

The border-spacing property may be specified as either one or two values.

When one <length> value is specified, it defines both the horizontal and vertical spacings between cells.
When two <length> values are specified, the first value defines the horizontal spacing between cells (i.e., the space between cells in adjacent columns), and the second value defines the vertical spacing between cells (i.e., the space between cells in adjacent rows).

Values

<length>: The size of the spacing as a fixed value.

Formal syntax

<length> <length>?

Example

CSS

table {
  border-spacing: 5px 12px;
  padding: 0 8px 8px 0;
  border: 1px solid orange;
}
td {
  width: 20px;
  height: 20px;
  border: 1px solid blue;
  text-align: center;
}

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

Result

Specifications

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

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0	(Yes)	1.0 (1.7 or earlier)	8.0	4.0	1.0 (85)

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	(Yes)	1.0 (1.9.2)	?	?	?