CSS Property border-spacing








The border-spacing property controls the distance between the borders of adjacent cells when border-collapse is separate;.

Summary

ItemValue
Initial value no value
Inherited yes
Version CSS2
JavaScript syntax object.style.borderSpacing="5px"

CSS Syntax

border-spacing: non-negative length (s) | inherit 

If one length value is provided, like 2px, it sets both the horizontal and vertical distance.

If two length values are provided, like 2px 3px, the first sets the horizontal distance and the second sets the vertical distance.





Property Values

The property values are listed in the following table.

ValueDescription
length length Sets the distance in px, cm, etc. Negative values are not allowed.
inherit Inherit the border-spacing property from the parent element

Browser compatibility

border-spacing Yes 8.0 Yes Yes Yes

Example

An example showing how to use border-spacing CSS property.

<!DOCTYPE HTML>
<html>
    <head>
        <style>
table {<!--  w ww.jav a  2 s.  c  o  m-->
    border: 1px solid rgb(200, 200, 200);
    caption-side: bottom;
    width: 100%;
    table-layout: fixed;
    border-spacing: 15px;
}
th {
    background: lightyellow;
}
th, td {
    border: 1px solid rgb(200, 200, 200);
    padding: 5px;
    overflow: hidden;
}        
        </style>
    </head>
    <body>
        <table>
            <caption>
                My favorite records.
            </caption>
            <colgroup>
                <col/>
                <col/>
                <col/>
            </colgroup>
            <thead>
                <tr>
                    <th>Column 1</th><th>Colunm 2</th><th>Column 3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td> R</td><td> A</td><td> 1965</td>
                </tr>
                <tr>
                    <td> B</td><td> V</td><td> 1967</td>
                </tr>
                <tr>
                    <td> M</td><td> T</td><td> 1995</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Click to view the demo