totn CSS

CSS: border-spacing property

This CSS tutorial explains how to use the CSS property called border-spacing with syntax and examples.

Description

The CSS border-spacing property defines the spacing between the borders of adjacent cells in a table when using the separated borders model to render the table (see the border-collapse property to change the rendering model).

Syntax

The CSS border-spacing property can be expressed with one or two values provided.

Syntax - One Value

The syntax for the CSS border-spacing property (with 1 value) is:

border-spacing: value;

When one single value is provided, the border-spacing value will apply to both the horizontal space and vertical space between adjacent cells. It can be one of the following:

Value Description
fixed Fixed value expressed in px, em, ...
table { border-spacing: 10px; }
inherit Element will inherit the border-spacing from its parent element
table { border-spacing: inherit; }

Syntax - Two Values

The syntax for the CSS border-spacing property (with 2 values) is:

border-spacing: horizontal vertical;

When two values are provided, the first value will apply to the horizontal space between cells. The second value will apply to the vertical space between cells. It can be the following:

Value Description
fixed Fixed value expressed in px, em, ...
table { border-spacing: 5px 8px; }

Note

  • The border-spacing property applies to an HTML table that is rendered using the separated borders model (see border-collapse property to learn more about the border models).
  • The separated borders model renders a table such that adjacent cells have their own distinct borders that are not shared, and the border-spacing property determines the spacing between the cells.
  • The collapsed borders model renders a table such that adjacent cells share their borders.

Browser Compatibility

The CSS border-spacing property has basic support with the following browsers:

  • Chrome
  • Firefox (Gecko)
  • Internet Explorer 8+ (IE 8+)
  • Opera 4+
  • Safari (WebKit)

Example

We will discuss the border-spacing property below, exploring examples of how to use this property in CSS.

Let's first look at an example of where we set the border-spacing on a table that is rendered using the separated borders model. For example:

The CSS would look like this:

table { border-spacing: 3px 10px; border: 1px solid red; }

th { border: 1px solid blue; }

td { border: 1px solid black; }

The HTML would look like this:

<table>
  <tr>
    <th>Column 1 Heading</th>
    <th>Column 2 Heading</th>
  </tr>
  <tr>
    <td>techonthenet.com</td>
    <td>Technical reference site</td>
  </tr>
  <tr>
    <td>checkyourmath.com</td>
    <td>Math calculation site</td>
  </tr>
  <tr>
    <td>bigactivities.com</td>
    <td>Kids activity site</td>
  </tr>
</table>

The table rendered using the separated borders model would look like this:

CSS

In this CSS border-spacing example, we have set the border-spacing property to 3px for the horizontal spacing and 10px for the vertical spacing. So as you can see, the border-spacing property works as expected on a table rendered with the separated borders model, which is the default rendering model for HTML tables.

Now let's look at what happens when you change the rendering model to the collapsed borders model (as specified by border-collapse: collapse).

table { border-spacing: 3px 10px; border-collapse: collapse; border: 1px solid red; }

th { border: 1px solid blue; }

td { border: 1px solid black; }

Now using the collapsed borders model, our table would look like this:

CSS

As you can see, the border-spacing property has no affect on our table once the border-collapse property has been set to collapse.

Share on: