CSS Reference Property

border-spacing

The border-spacing property is used to specify the distance between the borders of adjacent border cells.

It is also used to specify (or add to) the distance between the table borders and the borders of cells at the table’s edges (cells belonging to the first and last rows and columns).

It takes one or two length values that determine the vertical and horizontal spacing. If one value is specified, it gives both the vertical and horizontal spacing. If two values are specified, the first one gives the horizontal spacing and the second one gives the vertical spacing.

When the value of the border-spacing property is used to determine the distance between the table borders and the cells at its edges, the spacing is added to any padding applied to the table. The distance between the table border and the borders of the cells on the edge of the table is the table’s padding for that side, plus the relevant border spacing distance. For example, on the right hand side, the distance is the table’s padding-right value plus the horizontal border-spacing.

Trivia & Notes

The border-spacing property only applies when the value of the border-collapse property is separate, because otherwise, if the borders are collapsed with a collapse value, there won’t be any spaces between the borders.

Official Syntax

Syntax:

border-spacing: <length> <length>? | inherit

Initial: 0
Applies To: elements with ‘table’ and ‘inline-table’ display
Animatable: no

Values

<length> <length>?

One or two <length> values. (The question mark indicates the second value is optional.) If one value is specified, it gives both the vertical and horizontal spacing. If two values are specified, the first one gives the horizontal spacing and the second one gives the vertical spacing.

See the <length> entry for a list of possible values. Negative values are not allowed.

inherit

The border spacing is inherited from the element’s parent.

Examples

table {
    border-collapse: separate;
    border-spacing: 1em;
    padding: .5em;
}

Live Demo

The table in the following demo has a padding and a border spacing set to it. Try changing the values to see how the spacing changes between the cells and around them.

View this demo on the Codrops Playground

Browser Support

The border-spacing property is supported in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer 8+, and on Android and iOS.