CSS | border-collapse Property - GeeksforGeeks

03 Nov, 2021
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 separate border of a cell.
collapse: It is used to collapse adjacent cells and make common border.
initial: It is used to set border-collapse property to its default value.
inherit: It is used when border-collapse property inherit from its parent elements.
Example 1:  
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:  
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
Internet Explore/Edge 5.0
Firefox 1.0
Opera 4.0
Apple Safari 1.2
 
ManasChhabra2
CSS-Properties
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
CSS to put icon inside an input element in a form
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills