CSS - border-collapse Property

Quiz

CSS border-collapse property determines whether the borders should be shared or separated around the cells of a table. It is used for controlling the appearance of tables.

Syntax

border-collapse: separate | collapse | initial | inherit;

Property Values

Value	Description
collapse	The borders are collapsed into a single border, two adjancent cells share same border.
separate	The borders are separated, each cell has its own distinct border. Default value.
initial	This sets the property to its default value.
inherit	This inherits the property from the parent element.

Examples of CSS Border Collapse Property

The following examples explain the border-collapse property with different values.

Border Collapse with Shared Border

When dealing with tables, if we want the individual cells of the table to have shared borders, we use the collapse value. In the following example, collapse value has been used for the table elements.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      table,
      td,
      th {
         border: 2px solid grey;
         padding: 10px;
      }

      #student-details {
         border-collapse: collapse;
      }
   </style>
</head>

<body>

   <h2>
      CSS border-collapse property
   </h2>
   <table id="student-details">
      <tr>
         <th>Student</th>
         <th>Subject</th>
         <th>Marks</th>
      </tr>
      <tr>
         <td>Peter</td>
         <td>Maths</td>
         <td>77</td>
      </tr>
      <tr>
         <td>Ashok</td>
         <td>Physics</td>
         <td>85</td>
      </tr>
      <tr>
         <td>Priyanka</td>
         <td>English</td>
         <td>90</td>
      </tr>

   </table>
</body>

</html>

Border Collapse with Distinct Border

When dealing with tables, if we want the individual cells of the table to have distinct borders, we use the separate value. In the following example, separate value has been used for the table elements.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      table,
      td,
      th {
         border: 2px solid grey;
         padding: 10px;
      }

      #student-details {
         border-collapse: separate;
      }
   </style>
</head>

<body>

   <h2>
      CSS border-collapse property
   </h2>
   <table id="student-details">
      <tr>
         <th>Student</th>
         <th>Subject</th>
         <th>Marks</th>
      </tr>
      <tr>
         <td>Peter</td>
         <td>Maths</td>
         <td>77</td>
      </tr>
      <tr>
         <td>Ashok</td>
         <td>Physics</td>
         <td>85</td>
      </tr>
      <tr>
         <td>Priyanka</td>
         <td>English</td>
         <td>90</td>
      </tr>

   </table>
</body>

</html>

Supported Browsers

Property
border-collapse	1.0	5.0	1.0	1.2	4.0

css_reference.htm

Print Page