Border-spacing

In this chapter we will learn how to use border-spacing property.

The border-spacing property specifies the distance between the borders of adjacent cells.

This property applies only when border-collapse is separate.

The border spacing can be specified using one or two length values. If two values are given, the first sets the horizontal spacing, and the second sets the vertical spacing. If only one value is given, it sets both the horizontal and vertical spacing to the specified value.

Negative values are not allowed.

CSS Syntax

border-spacing: length | initial | inherit;

Let's see an example:

<!DOCTYPE html>
<html>
   <head>
       <title>Title of the document</title>
       <style>  
        table{
          border-spacing: 20px 30px;
        }
       </style>
   </head>
   <body>
      
      <table border="1">
       <thead>
         <tr>
           <th>Heading</th>
           <th>Heading</th>
           <th>Heading</th>
           <th>Heading</th>
         </tr>
      </thead>
      <tbody>       
      <tr>
        <td>Some text</td>
        <td>Some text</td>
        <td>Some text</td>
        <td>Some text</td>
      </tr>
      <tr>
       <td>Some text</td>
       <td>Some text</td>
       <td>Some text</td>
       <td>Some text</td>
      </tr>
    </tbody>
   </table>

  </body>
</html>

Property Values

Value Descriptions
length It describes both the horizontal and vertical spacings between cells.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.