Categories
Web development

CSS border-spacing Property

CSS border-spacing Property

The CSS border-spacing property settles the distance between the borders of adjacent cells. The CSS border-spacing property works only when the CSS border-collapse property value is set to separate.

Demo:

Click the “Try it” button to change the border-spacing property of the TABLE element to 10px:


Name Surname
John Black
Matt Green
Adam Brown

Syntax:

border-spacing: length;

length – defines the distance between the borders of adjacent cells (px, cm…).

Note:

You can define two values:
1) if one value is defined, it specifies both the horizontal and vertical spacing between cells,
2) if two values are specified, the first settles the horizontal spacing, and the second settles the vertical spacing.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid #333;
}

#table1 {
  border-collapse: separate;
  border-spacing: 15px;
}

#table2 {
  border-collapse: separate;
  border-spacing: 15px 50px;
}
</style>
</head>
<body>

<h4>border-spacing: 10px;</h4>

<table id="table1">
  <tr>
    <th>Firstname</th>
    <th>Surname</th>
  </tr>
  <tr>
    <td>Adam</td>
    <td>Brown</td>
  </tr>
  <tr>
    <td>John</td>
    <td>White</td>
  </tr>
</table>

<h4>border-spacing: 15px 30px;</h4>

<table id="table2">
  <tr>
    <th>Firstname</th>
    <th>Surname</th>
  </tr>
  <tr>
    <td>Adam</td>
    <td>Brown</td>
  </tr>
  <tr>
    <td>John</td>
    <td>White</td>
  </tr>
</table>

</body>
</html>

Output:

border-spacing: 10px;

Firstname Surname
Adam Brown
John White

border-spacing: 10px 30px;

Firstname Surname
Adam Brown
John White

Enjoy coding!

Read also:

CSS border-collapse Property

CSS Columns