CSS border-collapse Property Tutorial

In this section, we will learn what the border-collapse is and how to use it in CSS.

Click here to run the example of border-collapse property.

CSS border-collapse Property Definition and Usage

By default, there’s a little space between each table cell, but CSS provided a property called `border-collapse` by which we can collapse (remove) these empty spaces.

Note: you can apply this property on <table> element.

CSS border-collapse Property Syntax

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

CSS border-collapse Property Value

There are two values that can be set for this property:

  • separate: this is the default value that puts a little space between table cells.
  • collapse: if we set this value, any space between table cells will be removed.

Also, the two global values “initial” and “inherit” can be used for this property.

Example: border-collapse property in CSS

See the Pen border-collapse property in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.

How Does CSS border-collapse Property Work?

The border-collapse property is used to remove any space between a table’s cells. This means even if we use `border-spacing` to set a space between a table’s cells, it will have no effect if there’s the `border-collapse` property with the value collapse used in that table.

Example: collapse table border

See the Pen collapse table border by Enjoy Tutorials (@enjoytutorials) on CodePen.

As you can see, using the `border-spacing` property has no effect if there’s the `border-collapse` property with the value “collapse” set for that table.


Top Technologies