CSS border-spacing

The border-spacing property in CSS is used to set the spacing between the borders of adjacent cells in a table. It only works on tables that have the border-collapse property set to separate.

The border-spacing property can take one or two values. When one value is provided, it sets the horizontal and vertical spacing to the same value. When two values are provided, the first value represents the horizontal spacing and the second value represents the vertical spacing.

Here is the syntax for using the border-spacing property:


table {
  border-collapse: separate;
  border-spacing: <horizontal-spacing> <vertical-spacing>;
}

Let's see an example to better understand how the border-spacing property works:

Result:

Cell 1	Cell 2
Cell 3	Cell 4

In this example, we have a simple table with four cells. Let's apply the border-spacing property to this table to see the difference:


table {
  border-collapse: separate;
  border-spacing: 10px 5px;
}

Now let's see the updated table with the specified border-spacing:

Result:

Cell 1	Cell 2
Cell 3	Cell 4

As you can see, the border-spacing property has added spacing between the cells of the table, making it easier to distinguish between them.