CSS - border-spacing Property

Quiz

CSS border-spacing property sets the distance between cells in a table. For this property to show its effect, the table must be rendered using the border-collapse 'separate' model.

Syntax

border-spacing: length | initial | inherit;

Property Values

Value	Description
length	It specifies the distance between the cells. Any length unit. One value applies spacing to both horizontal and vertical directions, if two values are given, first value applies spacing along the horizontal axis, the second applies to the vertical axis.
initial	This sets the property to its default value.
inherit	This inherits the property from the parent element.

Examples of CSS Border Spacing Property

The following examples explain the border-spacing property with different values.

Border Spacing Property with Length Values

To set table cell spacing, we can use length values (e.g., 10px, 30px 14px etc.). A single value applies spacing both horizontally and vertically, while two values specify horizontal and vertical spacing respectively. These are shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      table,
      td,
      th {
         border: 1px solid black;
         padding: 5px;
         text-align: center;
         background-color: lightblue;
      }
      #single-value {
         border-collapse: separate;
         border-spacing: 17px;
      }

      #two-values {
         border-collapse: separate;
         border-spacing: 17px 45px;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-spacing property
   </h2>
   <h4>
      border-spacing: Single Value (17px)
   </h4>
   <p>
      Here, single value 17px has been used,
      it applies spacing in both horizontal
      and vertical directions. The 'border-collapse'
      property is set to separate.
   </p>
   <table id="single-value">
      <tr>
         <th>Name</th>
         <th>Subject</th>
         <th>Marks</th>
      </tr>
      <tr>
         <td>John</td>
         <td>English</td>
         <td>76</td>
      </tr>
      <tr>
         <td>Aman</td>
         <td>Maths</td>
         <td>85</td>
      </tr>
      <tr>
         <td>Priya</td>
         <td>Chemistry</td>
         <td>90</td>
      </tr>
   </table>

   <h4>
      border-spacing: Two values (17px 45px)
   </h4>
   <p>
      Here, two values have been used
      17px and 45px. The 17px spacing is applied
      horizontally and 45px spacing is applied 
      vertically. The 'border-collapse' property
      is set to separate.
   </p>
   <table id="two-values">
      <tr>
         <th>Name</th>
         <th>Subject</th>
         <th>Marks</th>
      </tr>
      <tr>
         <td>John</td>
         <td>English</td>
         <td>76</td>
      </tr>
      <tr>
         <td>Aman</td>
         <td>Maths</td>
         <td>85</td>
      </tr>
      <tr>
         <td>Priya</td>
         <td>Chemistry</td>
         <td>90</td>
      </tr>
   </table>

</body>

</html>

Border Spacing Property with Initial Value

To not have any spacing between the table cells, we can use the initial value.The initial value removes the 2px default spacing. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      table,
      td,
      th {
         border: 1px solid black;
         text-align: center;
         background-color: lightgreen;
      }

      #default {
         border-collapse: separate;
      }

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

<body>
   <h2>
      CSS border-spacing property
   </h2>
   <h4>
      Default spacing of 2px
   </h4>
   <p>
      Here, the 'border-spacing' property
      has not been given any value but still
      some space is provided between the cells.
      This is the default 2px space.
   </p>
   <table id="default">
      <tr>
         <th>Name</th>
         <th>Subject</th>
         <th>Marks</th>
      </tr>
      <tr>
         <td>John</td>
         <td>English</td>
         <td>76</td>
      </tr>
      <tr>
         <td>Aman</td>
         <td>Maths</td>
         <td>85</td>
      </tr>
      <tr>
         <td>Priya</td>
         <td>Chemistry</td>
         <td>90</td>
      </tr>
   </table>

   <h4>
      border-spacing: Initial
   </h4>
   <p>
      Here, initial value has been used,
      it sets 0 spacing between the table cells
      as shown here.
   </p>
   <table id="initial">
      <tr>
         <th>Name</th>
         <th>Subject</th>
         <th>Marks</th>
      </tr>
      <tr>
         <td>John</td>
         <td>English</td>
         <td>76</td>
      </tr>
      <tr>
         <td>Aman</td>
         <td>Maths</td>
         <td>85</td>
      </tr>
      <tr>
         <td>Priya</td>
         <td>Chemistry</td>
         <td>90</td>
      </tr>
   </table>

</body>

</html>

Supported Browsers

Property
border-spacing	1.0	8.0	1.0	1.0	4.0

css_reference.htm

Print Page