Skip to main content
Home / CSS Almanac / Properties / B / border-collapse

border-collapse

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.

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

See the spacing and rounding collapse:

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
icon-link icon-logo-star icon-search icon-star