CSS border-spacing Property

CSS border-spacing property sets the spacing between the borders of adjacent table cells in a table when using the separated borders model.


The following table outline the usages and version history of this property.

Default value: 2px
Applies to: Table elements
Inherited: Yes
Version: CSS2
JavaScript Syntax: object.style.borderSpacing = "10px"


Here is a syntax for the CSS border-spacing property

border-spacing: length | initial | inherit;

CSS border-spacing property may be specified using one, or two values separated by whitespace.

  • If one value is specified, it applies to both the horizontal and vertical border spacing.
  • If two value are specified, the first value sets the horizontal border spacing, and the second value sets the vertical border spacing.

Property Values

The following table describes the values of this property.

Value Description
separate Specifies the length value expressed in px, pt, cm, em, etc.
Negative values are not allowed.
initial Sets default value of this property
inherit Inherits this property from its parent element


The example below shows to sets border-spacing property.

.one {
  border-spacing: 20px;
.two {
  border-spacing: 30px 10px;

Run it...   »

Browser Compatibility

  • Google Chrome 1+
  • Mozilla Firefox 1+
  • Internet Explorer 8+
  • Opera 4+
  • Safari 1+

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.