In order to access this site you need to enable JavaScript!

You are here: Reference > CSS > properties > border-spacing

border-spacing property

Browser support:

8

Specifies the space between cells in a table.

This property has no effect if the border-collapse property is set to collapse.

Note: The border-spacing property is supported in Internet Explorer from version 8.

JavaScript page for this property: borderSpacing. You can find other example(s) there.

Possible values:

One of the following values:

•

Values in this order (use the space character to separate them):

possible but not necessary; left to personal choice

•

inherit

Description of values:

horizontal space in non-negative length

The horizontal space between cells in length units. For the supported length units, see the length page.

inherit

Takes the value of this property from the computed style of the parent element.

vertical space in non-negative length

The vertical space between cells in length units. For the supported length units, see the length page.

Default: 0.

If only one length value is specified, it affects both the horizontal and vertical spacing.

Example HTML code 1:

This example illustrates the use of the border-spacing property:

<head>
    <style>
        .spacing0 {
            border-spacing: 0px;
        }
        .spacing0 td {
            border: 1px solid blue;
        }
        .spacing15 {
            border-spacing: 15px;
        }
        .spacing15 td {
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    Table with spacing 0px
    <table class="spacing0">
        <tr>
            <td>Apple</td>
            <td>13.46</td>
        </tr>
        <tr>
            <td>Pear</td>
            <td>35.21</td>
        </tr>
        <tr>
            <td>Peach</td>
            <td>23.12</td>
        </tr>
    </table>
    <br /><br />
    Table with spacing 15px
    <table class="spacing15">
        <tr>
            <td>Apple</td>
            <td>13.46</td>
        </tr>
        <tr>
            <td>Pear</td>
            <td>35.21</td>
        </tr>
        <tr>
            <td>Peach</td>
            <td>23.12</td>
        </tr>
    </table>
</body>