CSS border-spacing
property defines the gap between the borders of the adjacent cells. This property only works if the border-collapse property is set to separate
.
The border-spacing property can take one or two values. If only one value is specified, it sets both the horizontal as well as vertical spacing. Otherwise, if two values are specified, the first value sets the horizontal spacing and the second value sets the vertical spacing between the borders of the adjacent cells. Refer to the example below:
Example:
.table1{ border-collapse: separate; border-spacing: 20px; } .table2{ border-collapse: separate; border-spacing: 20px 40px; }
CSS Syntax
The border-spacing
property has the below syntax:
border-spacing: h-spacing v-spacing|initial|inherit;
Property Values
The border-spacing
property accepts the following values:
h-spacing v-spacing | Defines the horizontal and vertical spacing between the borders of adjacent cells. If only one value is specified, it sets both horizontal as well as vertical spacing. It can be specified in any valid CSS length formats such as ‘px’, ’em’, ‘rem’, ‘cm’, etc. The default value is 2px. |
initial | Sets the border-spacing property to its default value(2px). |
inherit | Inherits the border-spacing property from the parent element. |
General Info
Default Value | 2px |
Inherited | Yes |
JavaScript Usage | element.style.borderSpacing = “20px 40px”; |