CSS Property border-collapse








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

Summary

ItemValue
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

Example

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

<!DOCTYPE HTML>
<html>
<head>
  <style>
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;
}
</style>
</head>
<body>
<table>
  <tr>
    <th></th>
    <th>Title one</th>
    <th>Title two</th>
  </tr>
  <tr>
    <th>Row Title</th>
    <td>value</td>
    <td>value</td>
  </tr>
  <tr>
    <th>Row Title</th>
    <td>value</td>
    <td></td>
  </tr>
</table>
</body>
</html>

Click to view the demo