CSS bordercollapse Property (original) (raw)

CSS border-collapse Property

Last Updated : 22 May, 2026

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 `

CSS border-collapse Property

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

    #separateTable {
        border-collapse: separate;
    }

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

border-collapse: separate

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

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

html `

CSS border-collapse Property

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

border-collapse: separate

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