CSS border-spacing Property

Description

The border-spacing CSS property is used to control the space between the borders of adjacent table cells within an HTML table. It allows web developers to set both horizontal and vertical spacing, creating a gap or padding between the cells. By adjusting the values of border-spacing, you can control the layout and appearance of tables, making them more visually appealing and easier to read. This property is particularly useful when you want to fine-tune the spacing between table cells without resorting to additional CSS styles or HTML attributes.

Initial value

0

Applies to

'table' and 'inline-table' elements*

Inherited

Yes

Computed value

Two absolute lengths

Animatable

No

JavaScript syntax

object.style.borderSpacing

Interactive Demo

border-spacing: 0;

border-spacing: 10px;

border-spacing: 10px 20px;

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

The following table will show you the current browser support for the CSS border-spacing property.

Desktop
12	1	1	4	1

Tablets / Mobile
18	4	14	1	1	37

Last updated by CSSPortal on: 1st January 2024