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

border-spacing

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

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 that can be used to set different horizontal and vertical spacing.

Syntax

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

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

Values

The size of the spacing as a fixed value.

Formal definition

Formal syntax

<length> <length>?

Examples

Spacing and padding table cells

This example applies a spacing of .5em vertically and 1em horizontally between a table's cells. Note how, along its outside edges, the table's padding values are added to its border-spacing values.

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

table {   border-spacing: 1em .5em;   padding: 0 2em 1em 0;   border: 1px solid orange; }  td {   width: 1.5em;   height: 1.5em;   background: #d2d2d2;   text-align: center;   vertical-align: middle; } 

Specifications

See also

Last modified: Aug 12, 2021, by MDN contributors