Language
日本語
English

Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

  1. Home
  2. CSS Dictionary
  3. border-collapse

border-collapse

Specifies how borders between table cells are shared.

Sample Code

table.test { border-collapse: separate;}
table.test1 { border-collapse: collapse;}

Available Values

ValueDescription
separateEach cell has its own individual border. This is the default value.
collapseAdjacent borders are merged into a single shared border.

Browser Preview

In the samples below, the table element has『border: solid 1px #f00』, and each td element has either『border: solid 1px #00f』or『border: solid 1px #0f0』.

<table style="border-collapse: separate; border: solid 1px #f00; margin: 0 auto;">
	<tr><td style="border: solid 1px #00f;">This is a td element.</td><td style="border: solid 1px #0f0;">This is a td element.</td></tr>
	<tr><td style="border: solid 1px #0f0;">This is a td element.</td><td style="border: solid 1px #00f;">This is a td element.</td></tr>
</table>

<table style="border-collapse: collapse; border: solid 1px #f00; margin: 0 auto;">
	<tr><td style="border: solid 1px #00f;">This is a td element.</td><td style="border: solid 1px #0f0;">This is a td element.</td></tr>
	<tr><td style="border: solid 1px #0f0;">This is a td element.</td><td style="border: solid 1px #00f;">This is a td element.</td></tr>
</table>

Browser Compatibility

Chrome Chrome
1+
Firefox Firefox
1+
Safari Safari
1.1+
Edge Edge
12+
Supported in all versions
IE IE
11
10
9
8
7
6
Opera Opera
4+
3 and below ×
iOS Safari iOS Safari
1+
Android Android Browser
2.2+
1 and below ×
Chrome Android Chrome Android
Latest
Same support as desktop version
Firefox Android Firefox Android
Latest
Same support as desktop version

※ Version information is based on MDN.

Notes

Specifies how borders between table cells are shared.

The『border-collapse』property can only be applied to table or inline-table elements.

To adjust the spacing between cells when using『separate』, use the『border-spacing』property.

If you find any errors or copyright issues, please .