Avatar of Sara Cope
Sara Cope on (Updated on )

DigitalOcean joining forces with CSS-Tricks! Special welcome offer: get $100 of free credit.

The border-collapse property is for use on <table> elements (or elements made to behave like a table through display: table or display: inline-table). There are two values:

  • separate (default) – in which all table cells have their own independent borders and there may be space between those cells as well.
  • collapse – in which both the space and the borders between table cells collapse so there is only one border and no space between cells.

When border-collapse is collapse, it is notable that properties like border-spacing and border-radius (on actual borders) don’t do anything. You’ll need border-collapse: separate; if you need either of those things.

Here’s an example where you can swap between the two:

See the Pen
Table with Rounded Cells
by Chris Coyier (@chriscoyier)
on CodePen.

Related Properties

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Works Works Works Works Works Works Works