CSS border-collapse Property

Description

The CSS property border-collapse controls how the borders of table elements - the table itself, rows, columns and individual cells - are rendered relative to one another. At a conceptual level it switches the table between a mode where adjacent cell borders are visually merged into a single shared edge and a mode where every cell keeps its own distinct border with a gap between cells. Because it changes whether borders are shared or independent, it directly affects the table’s visual rhythm (continuous grid lines vs discrete boxes), how border widths contribute to overall table dimensions, and how cell backgrounds and borders interact when painted.

In the mode that merges adjacent borders, neighboring cell/row/column borders are resolved by a conflict-resolution process so that only one border is painted for any shared edge. That single painted edge can come from different sources (cell vs row vs table) depending on precedence rules and the characteristics of the candidate borders (for example, style and thickness affect which border is chosen), so authors need to be mindful of where they set border attributes. Because edges are shared, a change to the border on one cell can affect the appearance of the neighboring cell; likewise the effective width of a shared border contributes once to layout rather than twice. This has implications for precise sizing and for creating continuous grid lines or removing double-lines between cells.

In the mode that keeps borders separate, every cell’s border is drawn independently and any spacing between cells is preserved; that spacing itself is controlled by border-spacing. With separate borders, cell backgrounds, borders and their hit areas are fully independent, so different border widths or styles on adjacent cells do not conflict or get merged. The table’s own outer border (if present via the border properties) remains distinct from the individual cell borders, which makes it easier to style an enclosing outline while keeping interior cell boxes visually separated. Choosing between the two modes therefore depends on whether you want a clean, single-line grid or individually boxed cells - and on how you need borders to affect layout, painting order, and interaction with other table-level styling.

Definition

Initial value: seperate
Applies to: 'table' and 'inline-table' elements
Inherited: Yes
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.borderCollapse

Interactive Demo

border-collapse: collapse;

border-collapse: separate;

Bananas	5 Dollars
Bananas	10 Dollars
Oranges	2 Dollars
Grapes	3 Dollars

Syntax

border-collapse: collapse | separate

Values

collapseIs a keyword requesting the use of the collapsed-border table rendering model.
seperateIs a keyword requesting the use of the separated-border table rendering model.

Example

HTML

<div class='tables'>

    <figure class='table-wrap'>

        <h3>border-collapse: collapse</h3>

        <table class='example collapsed'>

            <caption>Collapsed borders</caption>

            <thead>

                <tr>

                    <th>Item</th>

                    <th>Price</th>

                    <th>Qty</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td>Apple</td>

                    <td>$1.00</td>

                    <td>3</td>

                </tr>

                <tr>

                    <td>Banana</td>

                    <td>$0.50</td>

                    <td>6</td>

                </tr>

                <tr>

                    <td>Cherry</td>

                    <td>$2.00</td>

                    <td>10</td>

                </tr>

            </tbody>

        </table>

    </figure>



    <figure class='table-wrap'>

        <h3>border-collapse: separate</h3>

        <table class='example separate'>

            <caption>Separate borders (with border-spacing)</caption>

            <thead>

                <tr>

                    <th>Item</th>

                    <th>Price</th>

                    <th>Qty</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td>Apple</td>

                    <td>$1.00</td>

                    <td>3</td>

                </tr>

                <tr>

                    <td>Banana</td>

                    <td>$0.50</td>

                    <td>6</td>

                </tr>

                <tr>

                    <td>Cherry</td>

                    <td>$2.00</td>

                    <td>10</td>

                </tr>

            </tbody>

        </table>

    </figure>

</div>

CSS

/* Layout */
.tables {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
    padding: 20px;
}
.table-wrap {
    width: 360px;
}

/* Table common styles */
.example {
    width: 100%;
    border: 2px solid #333;
    border-radius: 6px;
    overflow: hidden;
    background: #ffffff;
}
.example caption {
    text-align: left;
    font-weight: 600;
    padding: 10px 12px;
    background: #f4f4f4;
}
.example th,
.example td {
    padding: 10px 12px;
    border: 1px solid #666;
    text-align: left;
    vertical-align: middle;
    font-size: 14px;
}
.example thead th {
    background: #e9e9e9;
}
.example tbody tr:nth-child(even) td {
    background: #fbfbfb;
}

/* Examples: collapsed vs separate */
.collapsed {
    border-collapse: collapse; /* adjacent cell borders are merged */
}

.separate {
    border-collapse: separate; /* cell borders are separate */
    border-spacing: 10px;      /* visible gap between cells */
}

/* Visual hint to show the difference more clearly */
.separate td,
.separate th {
    background: #fff;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS border-collapse property. Hover over a browser icon to see the version that first introduced support for this CSS property.