CSS Property border-collapse

border-collapse property controls if to merge two borders, collapse to one border.


Initial value separate
Inherited Yes.
Version CSS2
JavaScript syntax object.style.borderCollapse="collapse"

CSS Syntax

border-collapse: collapse | separate | inherit

Property Values

The property values are listed in the following table.

Value Description
collapse Borders are collapsed into a single border
separate Borders are detached. Default value
inherit Inherit the border-collapse property from the parent element

Browser compatibility

border-collapse Yes Yes Yes Yes Yes


An example showing how to use border-collapse CSS property.

table {<!--from   w ww. ja  v  a2s .  c  om-->
  background-color: #efefef;
  width: 350px;
  border-collapse: separate;
  empty-cells: hide;
td {
  padding: 5px;
  border-style: solid;
  border-width: 1px;
  border-color: #999999;
    <th>Title one</th>
    <th>Title two</th>
    <th>Row Title</th>
    <th>Row Title</th>

Click to view the demo