CSS border-collapse Property

The border-collapse property in CSS is used to set the borders of the cell present inside the table and tells whether these cells will share a common border or not.

Syntax:

border-collapse: separate|collapse|initial|inherit;

Default Value: Its default value is separate.

Property Values:

separate: This property is used to set a separate border of a cell.
collapse: It is used to collapse adjacent cells and make a common border.
initial: It is used to set the border-collapse property to its default value.
inherit: It is used when border-collapse property inherits from its parent elements.

Example 1: In this article, we are using the above-explained property.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS border-collapse Property
    </title>

    <!-- border-collapse CSS property -->
    <style>
        table,
        td,
        th {
            border: 1px solid black;
        }

        #separateTable {
            border-collapse: separate;
        }

        #collapseTable {
            border-collapse: collapse;
        }
    </style>
</head>

<body>
    <h2>
        border-collapse: separate
    </h2>

    <table id="separateTable">
        <tr>
            <th>Author Name</th>
            <th>Contact No</th>
        </tr>
        <tr>
            <td>Geek</td>
            <td>XXXXXXXXXX</td>
        </tr>
        <tr>
            <td>GFG</td>
            <td>XXXXXXXXXX</td>
        </tr>
    </table>

    <h2>
        border-collapse: collapse
    </h2>

    <table id="collapseTable">
        <tr>
            <th>Author Name</th>
            <th>Contact No</th>
        </tr>
        <tr>
            <td>Geek</td>
            <td>XXXXXXXXXX</td>
        </tr>
        <tr>
            <td>GFG</td>
            <td>XXXXXXXXXX</td>
        </tr>
    </table>
</body>
</html>

Output:

Example 2: Here is another example of CSS border-collapse property.

html

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS border-collapse Property
    </title>

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

        /* border spacing is used to specify the 
            width between border and adjacent cells */
        #separateTable {
            border-collapse: separate;
            border-spacing: 10px;
        }

        #collapseTable {
            border-collapse: collapse;
            border-spacing: 10px;
        }

        #initialTable {
            border-collapse: initial;
        }
    </style>
</head>

<body>
    <h2>
        border-collapse: separate
    </h2>

    <table id="separateTable">
        <tr>
            <th>Author Name</th>
            <th>Contact No</th>
        </tr>
        <tr>
            <td>Geek</td>
            <td>XXXXXXXXXX</td>
        </tr>
        <tr>
            <td>GFG</td>
            <td>XXXXXXXXXX</td>
        </tr>
    </table>

    <h2>
        border-collapse: collapse
    </h2>

    <!-- border spacing property has no
        effect on border-collapse property-->
    <table id="collapseTable">
        <tr>
            <th>Author Name</th>
            <th>Contact No</th>
        </tr>
        <tr>
            <td>Geek</td>
            <td>XXXXXXXXXX</td>
        </tr>
        <tr>
            <td>GFG</td>
            <td>XXXXXXXXXX</td>
        </tr>
    </table>

    <h2>
        border-collapse: initial
    </h2>

    <table id="initialTable">
        <tr>
            <th>Author Name</th>
            <th>Contact No</th>
        </tr>
        <tr>
            <td>Geek</td>
            <td>XXXXXXXXXX</td>
        </tr>
        <tr>
            <td>GFG</td>
            <td>XXXXXXXXXX</td>
        </tr>
    </table>
</body>
</html>

Output:

Supported Browsers: The browser supported by border-collapse property are listed below:

Google Chrome 1.0
Edge 12.0
Internet Explorer 5.0
Firefox 1.0
Opera 4.0
Apple Safari 1.2

CSS border-collapse Property

Explore