CSS border-spacing property

Course recommendation:

Definition and usage

border-spacing property sets the distance between the borders of adjacent cells (only used for "separated" mode).Note:

Some versions of the IE browser do not support this property.

Description

This property specifies the distance between the cell boundaries in the separated border model. In the two specified length values, the first one is the horizontal interval, and the second one is the vertical interval. This property is ignored unless border-collapse is set to separate. Although this property is only applied to tables, it can be inherited by all elements in the table.

See also:CSS Tables

CSS Tutorial:HTML DOM Reference Manual:

borderSpacing property

Example

Set border-spacing for table:
  table
  {
  border-collapse:separate;
  border-spacing:10px 50px;

}

Try it yourself

CSS syntax lengthborder-spacing:

|initial|inherit;

Attribute value Value
Description

length length

Specifies the distance between the borders of adjacent cells. Use units such as px, cm, etc. Negative values are not allowed. length If one parameter is defined

If two parameters are defined, the defined values are horizontal and vertical spacing. length If two parameters are defined, the first one sets the horizontal spacing, and the second one sets the vertical spacing.
inherit Specifies that the border-spacing property of the parent element should be inherited.

Technical details

Default value: not specified
Inheritance: yes
Version: CSS2
JavaScript syntax: object.style.borderSpacing="15px"

More examples

Set the spacing between table borders
This example demonstrates how to set the distance between cell borders.

Browser support

Chrome IE / Edge Firefox Safari Opera
1.0 8.0 1.0 1.0 4.0