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.
Usages
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" |
Syntax
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 |
Examples
The example below shows to sets border-spacing property.
.one {
border-spacing: 20px;
}
.two {
border-spacing: 30px 10px;
}
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.