CSS border-collapse Property

CSS border-collapse property specifies whether the two borders of a table cell should collapse into a single border table cell or not.

Notice the difference between the two tables:

CSS border-collapse property

In the above image, the first table has its border-collapse property set to its default value separate. Therefore, two borders appear around each cell. While the second table has its border-collapse property set to collapse. Therefore, the two borders in the second table collapsed into one and each table cell has only a single border around it.

Try out the example below to see how it works:

Example:

.table1{
  border-collapse: separate; /* Default Value */
}
.table2{
  border-collapse: collapse;
}

CSS Syntax

The border-collapse property has the following syntax:

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

Property Values

The border-collapse property accepts the following values:

separateEach border cell displays its own border, therefore, two borders appear around each cell. This is the default value.
collapseThe two border around each cell collapses into a single border. Therefore, only a single border appears around each cell of the table.
initialSets the border-collapse property to its default value(separate).
inheritInherits the border-collapse property from its parent element.

General Info

Default Valueseparate
InheritedYes
JavaScript Usageelement.style.borderCollapse = “collapse”

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

Leave a Comment