CSS border-collapse

The CSS border-collapse property sets whether table borders should collapse into a single border or be separated with a gap.

There are two possible values for the border-collapse property:

• collapse: Borders will collapse into a single border.
• separate: Borders will be separated with a gap.

Let's see some examples to understand how the border-collapse property works:

In the example above, the table is using the default value which is separate. You can see that there is a visible gap between the table cells.

Now, let's see how the table looks when we use the border-collapse: collapse; property:

With border-collapse: collapse;, the borders of the table cells collapse into a single border, giving a cleaner look to the table.

Remember to apply the border-collapse property to your tables to control how the borders should be displayed.