CSS border-spacing Property

border-spacing The property specifies the distance between the borders of adjacent cells in the Table. This property is only applicable when the border-collapse property is set to no-collapse separate.

Syntax

border-spacing: length | initial | inherit;

Example

<!DOCTYPE html>
<html>
<head>
<style>
    table, td, th {
        border: 1px solid black;
    }

    .table1 {
        border-collapse: separate;
        border-spacing: 15px;
    }

    .table2 {
        border-collapse: separate;
        border-spacing: 15px 50px;
    }
</style>
</head>
<body>

<table class="table1">
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Department</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Victor</td>
        <td>Computer Science</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Harry</td>
        <td>Electrical</td>
    </tr>
</table>
<br>
<br>
<table class="table2">
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Department</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Victor</td>
        <td>Computer Science</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Harry</td>
        <td>Electrical</td>
    </tr>
</table>

</body>
</html>

Preview

Property Values

Value	Description
length length	Specifies the distance between adjacent cell borders in pixels, centimeters, and so on. Negative values are not permitted. If only one value is entered, it determines both the horizontal and vertical spacing between cells. If two values are given, the first determines horizontal spacing and the second determines vertical spacing.
initial	This property is set to its default value.
inherit	This property is inherited from its parent element.

Supported Browsers

Element	Chrome	Firefox	Safari	Edge / IE	Opera
border-spacing	1.0	1.0	1.0	8.0	4.0

border-right-width

border-style

CSS border-spacing Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us