codelessgenie blog

CSS `border-spacing` Property: A Comprehensive Guide

In the world of web design, creating visually appealing and well-structured tables is crucial. The CSS border-spacing property plays a significant role in controlling the spacing between the borders of table cells. Whether you're a beginner or an experienced web developer, understanding this property can help you achieve the desired layout for your tables. In this blog post, we'll explore the border-spacing property in detail, covering its syntax, usage, common practices, and best practices.

2026-06

Table of Content#

Syntax#

The border-spacing property is used in CSS to set the distance between the borders of adjacent cells in a table. The syntax is as follows:

table {
  border-spacing: horizontal-spacing vertical-spacing;
}
  • horizontal-spacing: Specifies the horizontal distance between the borders of adjacent cells. This can be a length value (e.g., px, em, rem) or 0.
  • vertical-spacing: Specifies the vertical distance between the borders of adjacent cells. This can also be a length value or 0.

If only one value is provided, it will be used for both horizontal and vertical spacing.

Values#

  • Length Values: You can use various length units like px (pixels), em (relative to the font size of the element), rem (relative to the root font size), etc. For example, border-spacing: 10px; will set both horizontal and vertical spacing to 10px.
  • 0: Setting border-spacing: 0; will remove any spacing between the borders of adjacent cells. This is useful when you want a more compact table layout or when you're using other techniques like border-collapse (which we'll touch on later).

Example Usage#

Let's look at some examples to better understand how the border-spacing property works.

Example 1: Basic Usage with Two Values#

<!DOCTYPE html>
<html>
 
<head>
  <style>
    table {
      border-collapse: separate;
      border-spacing: 20px 10px;
      border: 1px solid black;
    }
 
    td {
      border: 1px solid black;
    }
  </style>
</head>
 
<body>
  <table>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
    <tr>
      <td>Cell 3</td>
      <td>Cell 4</td>
    </tr>
  </table>
</body>
 
</html>

In this example, the border-collapse property is set to separate (which is the default for tables). The border-spacing property is then used to set a horizontal spacing of 20px and a vertical spacing of 10px between the cell borders.

Example 2: Using One Value#

<!DOCTYPE html>
<html>
 
<head>
  <style>
    table {
      border-collapse: separate;
      border-spacing: 15px;
      border: 1px solid black;
    }
 
    td {
      border: 1px solid black;
    }
  </style>
</head>
 
<body>
  <table>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
    <tr>
      <td>Cell 3</td>
      <td>Cell 4</td>
    </tr>
  </table>
</body>
 
</html>

Here, only one value (15px) is provided for border-spacing, so both horizontal and vertical spacing will be 15px.

Common Practices#

  • Combining with border-collapse:
    • If you set border-collapse: collapse; on a table, the border-spacing property will have no effect. border-collapse is used to remove the space between table borders and make them collapse into a single border. But if you want to have separate borders with spacing, you should use border-collapse: separate; (the default) along with border-spacing.
    • For example, when creating a simple data table where you want a bit of breathing room between cells, using border-collapse: separate and appropriate border-spacing values can be a good choice.
  • Responsive Design:
    • In responsive web design, you might want to adjust the border-spacing values based on the screen size. You can use media queries to do this. For instance:
table {
  border-collapse: separate;
  border-spacing: 10px;
}
 
@media (max-width: 600px) {
  table {
    border-spacing: 5px;
  }
}

This will make the table more compact on smaller screens.

Best Practices#

  • Consistency:
    • When using border-spacing in a project, try to maintain consistency across all tables. Decide on a set of spacing values (either fixed or based on a responsive approach) that fit the overall design aesthetic. For example, if your website has a clean and minimalistic look, you might choose smaller spacing values like 5px or 8px.
  • Testing:
    • Always test your table layouts with different browsers. While border-spacing is widely supported (see browser compatibility section below), there might be some minor visual differences due to browser rendering engines. Use browser testing tools or test on multiple actual browsers (like Chrome, Firefox, Safari, Edge) to ensure a consistent appearance.
  • Accessibility:
    • Consider the readability of your tables. Adequate border-spacing can make it easier for users (especially those with visual impairments) to distinguish between cells. Don't make the spacing too small that it becomes hard to tell where one cell ends and another begins.

Browser Compatibility#

The border-spacing property has good browser compatibility. It is supported in:

  • Chrome (from version 1 and above)
  • Firefox (from version 1 and above)
  • Safari (from version 1 and above)
  • Edge (from version 12 and above)
  • Internet Explorer (from version 8 and above, but with some caveats in older versions. It's best to test thoroughly if you need to support very old IE versions).

References#

By understanding and applying the border-spacing property effectively, you can create more visually appealing and user-friendly table layouts in your web projects. Whether it's for presenting data, creating layouts with tabular elements, or just adding some style to your HTML tables, this property is a valuable tool in your CSS arsenal.