CSS border-spacing Property

Example

Set the border-spacing for a table:

#table1 {
  border-collapse: separate;
  border-spacing: 15px;
}

#table2 {
  border-collapse: separate;
  border-spacing: 15px 50px;
}

Definition and Usage

The border-spacing property sets the distance between the borders of adjacent cells in a table.

Note: This property works only when border-collapse is separate.

Default value:	2px
Inherited:	yes
Animatable:	yes.
Version:	CSS2
JavaScript syntax:	object.style.borderSpacing="15px"

• Inherited : "Inherited = yes" means that it can takes (inherit) it's value from it's parent element.
• object - object in javascript means the element on which border-spacing is applied.
• Animatable - "Animatable = yes" means that it can be animated with CSS @keyframes.

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
border-spacing	1.0	8.0	1.0	1.0	4.0

CSS Syntax

border-spacing: length|initial|inherit;

Property Values

Value	Description	Demo
length length	Specifies the distance between the borders of adjacent cells in px, cm, etc. Negative values are not allowed. If one value is specified, it defines both the horizontal and vertical spacing between cells If two values are specified, the first sets the horizontal spacing and the second sets the vertical spacing
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.