CSS border-spacing Property

Description

The border-spacing property specifies the distance between the borders of adjacent cells.
Note: If the border-collapse: collapse property (borders are merged into one when possible), then the border-spacing property will be ignored.

Initial value

0

Applies to

'table' and 'inline-table' elements*

Inherited

Yes

Media

Visual

Computed value

Two absolute lengths

Animatable

No

CSS Version

CSS2, CSS3

JavaScript syntax

object.style.borderSpacing

Syntax

border-spacing: <length> <length>? | inherit

Values

• <length>The distance that separates adjoining cell borders. If one length is specified, it gives both the horizontal and vertical spacing. If two are specified, the first gives the horizontal spacing and the second the vertical spacing. Lengths may not be negative.

Example

<table class="test"> 

   <caption>border-spacing: 8px;</caption> 

   <tr> 

      <th>Name</th> <th>Price</th> 

   </tr> 

   <tr> 

      <td>Item 1</td> <td>Value 1</td> 

   </tr> 

   <tr> 

      <td>Item 2</td> <td>Value 2</td> 

   </tr> 

</table>

table {
   width: 80%;
   margin: 20px;
}
td, th {
   border: 1px solid blue;
}
.test {
   border-spacing: 8px; 
}

Browser Support

Desktop
8	12	1	1	4	1
Tablets / Mobile
≤37	18	4	14	1	1.0

Last updated by CSSPortal on: 12th October 2019