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.
