border-spacing

This property defines the length the spacing between neighboring cells in a <table> element. In order for this property to have effect, border-collapse needs to be set to separate.

Syntax

The border-spacing value is a length that defines the space between the cells. If two values are used they each define the horizontal and vertical spacing respectively. This spacing is also applied on the edge of the table between the table’s border and the cells in the first and last rows and the first and last columns. The table’s padding is also applied on top of this spacing.

/* Specifying one length value: */
border-spacing: 4px;

/* Specifying two values, horizontal and vertical spacing: */
border-spacing: 12px 20px;

Values

length
A non-negative length value of any type. Two values can also be used to set both horizontal and vertical spacing respectively.

initial
Global CSS keyword – this sets the property to the default value.

inherit
Global CSS keyword – this sets the property to be inherited from its parent element.

Browser Compatibilty

Demos

Have a code example of border-spacing? Submit a codepen.io demo and we'll showcase it here ↴