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 property values:

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.