# border-collapse property

The `border-collapse` property causes double borders between `td` or `th` cells of an HTML table (and also between the cell border and table itself) collapse and look like single.

This property applies only to tables and to elements with `display` in the `table` or `inline-table` value. Unfortunately, it will not work for ordinary block elements. Please note that you should apply it to the table, not its cells.

## Syntax

`selector { border-collapse: collapse | separate; }`

## Values

Value | Description
--- | ---
`collapse` | Double borders will appear as one. There are side effects: the `border-spacing` property and `cellspacing` attribute will stop to act.
`separate` | Each table cell will have its own border (so in some places the borders will be double if the space between cells is zero).

Default value: `separate`.

## Example . The separate value

Now all the borders in the table are double (the border is given to both the cells and the table itself):

`<table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table>` `table { border-collapse: separate; width: 400px; border-spacing: 0; border: 1px solid red; } td { border: 1px solid red; text-align: center; }`

:

## Example . The separate value

And now the border is given to the cells, but not to the table itself. Where two cells have a common border, the borders will be double, in other places - single:

`<table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table>` `table { border-collapse: separate; width: 400px; border-spacing: 0; } td { border: 1px solid red; text-align: center; }`

:

## Example . The collapse value

Now in the table all the borders will collapse and will look `1px` thick, as we would like:

`<table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table>` `table { border-collapse: collapse; width: 400px; border: 1px solid red; } td { border: 1px solid red; text-align: center; }`

:

← →
↑
en ru