CSS - border-collapse Property



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 Chrome Edge Firefox Safari Opera
border-collapse 1.0 5.0 1.0 1.2 4.0
css_reference.htm
Advertisements