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;
}
Try it Yourself »

Definition and Usage

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

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

Show demo ❯

Default value: 2px
Inherited: yes
Animatable: yes. Read about animatable Try it
Version: CSS2
JavaScript syntax: object.style.borderSpacing="15px" Try it

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
Demo ❯
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Related Pages

CSS tutorial: CSS Table

HTML DOM reference: borderSpacing property


Copyright 1999-2023 by Refsnes Data. All Rights Reserved.