CSS - border-collapse


border-collapse determines the border model used in the rendering of a table.

Possible Values:

  • collapse: Borders are collapsed to make a single border. Two adjacent cells will share a border.
  • separate: Borders are separated. Every cell has its own border, and none of these borders are shared with other cells in the table

Applies to:

Elements with a display of table or inline-table.

DOM Syntax:

object.style.borderCollapse="Any of the two values";


Following is the example to show both values:

<style type="text/css">
table.one {border-collapse:collapse;}
table.two {border-collapse:separate;}
td.a {
      padding: 10px;
td.b {border-style:solid; 

<table class="one">
<caption>Collapse Border Example</caption>
<tr><td class="a"> Cell A Collapse Example</td></tr>
<tr><td class="b"> Cell B Collapse Example</td></tr>

<br />
<table class="two">
<caption>Separate Border Example</caption>
<tr><td class="a"> Cell A Separate Example</td></tr>

<tr><td class="b"> Cell B Separate Example</td></tr>

This will produce following result:

Collapse Border Example
Cell A Collapse Example
Cell B Collapse Example

Separate Border Example
Cell A Separate Example
Cell B Separate Example



Spacer Bottom Left Corner ImageBottom Right Corner Image
Valid XHTML 1.0 Strict  Valid CSS! Check the accessibility of this site according to U.S. Section 508