CSS border-collapse Property

The border-collapse CSS property is used to set the borders of the cells contained within the table and indicates whether or not these cells will share a common border.

Syntax

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

Example

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

    .table1 {
        border-collapse: separate;
    }

    .table2 {
        border-collapse: collapse;
    }
</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
separate	Borders are separated; each cell will have its own set of borders. This is the default setting.
collapse	When possible, borders are combined into a single border (border-spacing and empty-cells properties have no effect).
initial	This property is set to its default value.
inherit	Inherits this property from its parent element.

Supported Browsers

Element	Chrome	Firefox	Safari	Edge / IE	Opera
border-collapse	1.0	1.0	1.2	5.0	4.0

border-bottom-width

border-color

CSS border-collapse Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us