CSS border-collapse Property

The border-collapse property in CSS is used to control whether table cell borders are separated or merged into a single border. It helps improve the appearance and structure of HTML tables.

Defines if adjacent table cell borders should be combined or kept separate.
Common values are collapse and separate.
Makes tables cleaner and more visually organized.

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: Here, we are using the above-explained property.

HTML

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

<!--Driver Code Ends-->

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

        #separateTable {
            border-collapse: separate;
        }

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

<!--Driver Code Starts-->
</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>
<!--Driver Code Ends-->

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

html

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

<!--Driver Code Ends-->

    <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>

<!--Driver Code Starts-->
</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>
<!--Driver Code Ends-->

CSS border-collapse Property

Explore