CSS border-spacing Property

CSS border-spacing property defines the gap between the borders of the adjacent cells. This property only works if the border-collapse property is set to separate.

The border-spacing property can take one or two values. If only one value is specified, it sets both the horizontal as well as vertical spacing. Otherwise, if two values are specified, the first value sets the horizontal spacing and the second value sets the vertical spacing between the borders of the adjacent cells. Refer to the example below:

Example:

.table1{
  border-collapse: separate;
  border-spacing: 20px;
}
.table2{
  border-collapse: separate;
  border-spacing: 20px 40px;
}

CSS Syntax

The border-spacing property has the below syntax:

border-spacing: h-spacing v-spacing|initial|inherit;

Property Values

The border-spacing property accepts the following values:

h-spacing v-spacingDefines the horizontal and vertical spacing between the borders of adjacent cells. If only one value is specified, it sets both horizontal as well as vertical spacing. It can be specified in any valid CSS length formats such as ‘px’, ’em’, ‘rem’, ‘cm’, etc. The default value is 2px.
initialSets the border-spacing property to its default value(2px).
inheritInherits the border-spacing property from the parent element.

General Info

Default Value2px
InheritedYes
JavaScript Usageelement.style.borderSpacing = “20px 40px”;

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

    View all posts

Leave a Comment