CSS border-spacing (Set Space between Adjacent Cells)

The CSS border-spacing property is used to define space between adjacent cells border. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      table, th, td {border: 2px solid maroon;}
      table#xyz {border-spacing: 10px;}
   </style>
</head>
<body>

   <h2>Without border-spacing</h2>
   <table>
      <tr>
         <th>Name</th>
         <th>Course</th>
      </tr>
      <tr>
         <td>Tobias</td>
         <td>VFX and Animation</td>
      </tr>
      <tr>
         <td>Jonas</td>
         <td>Cyber Security</td>
      </tr>
      <tr>
         <td>Elias</td>
         <td>Hardware and Networking</td>
      </tr>
   </table>

   <h2>With border-spacing</h2>

   <table id="xyz">
      <tr>
         <th>Name</th>
         <th>City</th>
      </tr>
      <tr>
         <td>Tobias</td>
         <td>Cologne</td>
      </tr>
      <tr>
         <td>Jonas</td>
         <td>Munich</td>
      </tr>
      <tr>
         <td>Elias</td>
         <td>Hamburg</td>
      </tr>
   </table>
   
</body>
</html>
Output

Without border-spacing

Name Course
Tobias VFX and Animation
Jonas Cyber Security
Elias Hardware and Networking

With border-spacing

Name City
Tobias Cologne
Jonas Munich
Elias Hamburg

CSS border-spacing Syntax

The syntax of border-spacing property in CSS, is:

border-spacing: x;

The value of x should be any of the following:

  • length - used to define the required space around the adjacent borders of table cells
  • initial - used to define the space using default value
  • inherit - used to define the space using the value inherited by its parent

CSS border-spacing with Two Values

When two values given to border-spacing, then first value applies to horizontal, whereas the second value applies to vertical spacing. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      table, td {border: 2px solid maroon;}
      table#abc {border-spacing: 10px;}
      table#xyz {border-spacing: 10px 40px;}
   </style>
</head>
<body>

   <table id="abc">
      <tr>
         <th>Name</th>
         <th>Course</th>
      </tr>
      <tr>
         <td>Noah</td>
         <td>Microsoft Office and Typing</td>
      </tr>
      <tr>
         <td>Leon</td>
         <td>Software Engineering</td>
      </tr>
      <tr>
         <td>Paul</td>
         <td>Web Designing</td>
      </tr>
   </table>

   <br/>

   <table id="xyz">
      <tr>
         <th>Name</th>
         <th>City</th>
      </tr>
      <tr>
         <td>Noah</td>
         <td>Nuremberg</td>
      </tr>
      <tr>
         <td>Leon</td>
         <td>Frankfurt</td>
      </tr>
      <tr>
         <td>Paul</td>
         <td>Dresden</td>
      </tr>
   </table>
   
</body>
</html>
Output
Name Course
Noah Microsoft Office and Typing
Leon Software Engineering
Paul Web Designing

Name City
Noah Nuremberg
Leon Frankfurt
Paul Dresden

CSS Online Test


« Previous Tutorial Next Tutorial »



Like/Share Us on Facebook 😋