LAST UPDATED: JUNE 11, 2021
CSS border-collapse Property
CSS border-collapse property is used to assert whether cells in a table are having separate or shared borders. When the cells collapse, the border-style value of the inset behaves as groove, and outset behaves like ridge. When cells separate, the distance between the cells is determined by the border-spacing property. Let's see the syntax of this property first.
Syntax for border-collapse Property
Following is the syntax for the border-collapse property.
border-collapse: separate|collapse|initial|inherit;
CSS border-collapse
Let's see what values this property can have and what do those values do:
| Value |
Description |
| collapse |
In this case, the adjacent cells have shared borders. |
| separate |
In this case, the adjacent cells have distinct borders. |
Example: CSS border-collapse Property
Here in the example below, we are using the border-collapse property with different background colors, borders, and different values. In this case, we have given the border-collapse as collapse and separate. The CSS styling is done inside the opening and closing head tags of the HTML.
<!DOCTYPE html>
<html>
<head>
<title>Border-collapse property in CSS</title>
<style type="text/css">
.collapse {
border-collapse: collapse;
}
.separate {
border-collapse: separate;
}
table {
display: inline-table;
margin: 1em;
border: dashed 5px;
}
table th,
table td {
border: solid 3px;
}
.fx { border-color: red yellow; }
.gk { border-color: pink blue; }
.ed { border-color: yellow black; }
.tr { border-color: aqua; }
.sa { border-color: silver blue; }
.wk { border-color: green red; }
.ch { border-color: red black green purple; }
.bk { border-color: navy blue teal aqua; }
.op { border-color: red; }
</style>
</head>
<body>
<table class="separate">
<caption><code>border-collapse: separate</code>
</caption>
<tbody>
<tr>
<th>Browser</th>
<th>Layout Engine</th>
</tr>
<tr>
<td class="fx">Firefox</td>
<td class="gk">Gecko</td>
</tr>
<tr>
<td class="ed">Edge</td>
<td class="tr">EdgeHTML</td>
</tr>
<tr>
<td class="sa">Safari</td>
<td class="wk">Webkit</td>
</tr>
<tr>
<td class="ch">Chrome</td>
<td class="bk">Blink</td>
</tr>
<tr>
<td class="op">Opera</td>
<td class="bk">Blink</td>
</tr>
</tbody>
</table>
<table class="collapse">
<caption><code>border-collapse: collapse</code>
</caption>
<tbody>
<tr>
<th>Browser</th>
<th>Layout Engine</th>
</tr>
<tr>
<td class="fx">Firefox</td>
<td class="gk">Gecko</td>
</tr>
<tr>
<td class="ed">Edge</td>
<td class="tr">EdgeHTML</td>
</tr>
<tr>
<td class="sa">Safari</td>
<td class="wk">Webkit</td>
</tr>
<tr>
<td class="ch">Chrome</td>
<td class="bk">Blink</td>
</tr>
<tr>
<td class="op">Opera</td>
<td class="bk">Blink</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
Example 2: CSS border-collapse Property with the 'collapse' value
Here in the example below, we are using the border-collapse property with different background colors, borders, and different values. In this case, we have given the border-collapse as collapse. The CSS styling is done inside the opening and closing head tags of the HTML.
<!DOCTYPE html>
<html>
<head>
<title>Border-collapse property in CSS</title>
<style type="text/css">
.border-box {
border-collapse: separate;
width: 50px;
height: 50px;
border-color: red;
background-color: pink;
}
</style>
</head>
<body>
<div class="border-box">Study Tonight</div>
</body>
</html>
Output:
Browser Compatibility
There are many browsers that do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
1 |
1 |
| Edge |
12 |
12 |
| Firefox |
1 |
1 |
| Internet Explorer |
5 |
5 |
| Opera |
4 |
4 |
| Safari |
1.2 |
1.2 |
| Webview Android |
2.3 |
2.3 |
| Chrome Android |
18 |
18 |
| Firefox Android |
4 |
4 |
| Opera Android |
10.1 |
10.1 |
| IOS Safari |
3 |
3 |
| Samsung Internet |
1.0 |
1.0 |
Conclusion
The initial value for the border-collapse property is separate. This property is applicable to the table and the inline-table elements. It is an inherited property. The computed value for this property is as specified. The animation type of this property is discrete.
