Open In App

CSS border-collapse Property

Improve
Improve
Like Article
Like
Save
Share
Report

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


Last Updated : 13 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads