CSS border-spacing Property

border-spacing sets the table cell border spacing.

This property is used for table cells only.

Example

#

A table border border-spacing.
Table border will be displayed away the table cells border.

Fullname Age
Charice Mckinley 26
Penelope Gray 32
<style>
  .table-separate-2,
  .table-separate-2 td,
  .table-separate-2 th {
    border: 1px solid #6266f1;
    padding: 10px;
  }

  .table-separate-2 {
    border-collapse: separate;
    border-spacing: 15px;
  }
</style>

<table class="table-separate-2">
  <tr>
    <th>Fullname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Charice Mckinley</td>
    <td>26</td>
  </tr>
  <tr>
    <td>Penelope Gray</td>
    <td>32</td>
  </tr>
</table>

Using border-spacing

The border-spacing property sets adjacent cells border distance.

This property is used for table cells.

This property only works when border-collapse is set to separate.

Note:

Syntax

border-spacing: length | initial | inherit;

Values

#

Value Description
length length Distance of borders in px, cm, and other CSS units. Negative values are not accepted.
If only one value is specified, the horizontal and vertical spacing will be adjusted.
Otherwise, the first value will be the horizontal spacing, and the second value will be the vertical spacing.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different border-spacing values.

Fullname Age
Charice Mckinley 26
Penelope Gray 32
<style>
  .border-spacing,
  .border-spacing td,
  .border-spacing th {
    border: 1px solid #6266f1;
    padding: 10px;
  }

  .border-spacing {
    border-collapse: separate;
    border-spacing: initial;
  }
</style>

<table class="border-spacing">
  <tr>
    <th>Fullname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Charice Mckinley</td>
    <td>26</td>
  </tr>
  <tr>
    <td>Penelope Gray</td>
    <td>32</td>
  </tr>
</table>

Browser support

This table shows when border-spacing support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
8.0 Mar 2009
Opera
4.0 Jun 2000
Safari
1.0 Jun 2003

You may also like

Guides