{"id":13970,"date":"2011-08-31T20:03:26","date_gmt":"2011-09-01T03:03:26","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=13970"},"modified":"2022-05-20T07:59:14","modified_gmt":"2022-05-20T14:59:14","slug":"border-collapse","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-collapse\/","title":{"rendered":"border-collapse"},"content":{"rendered":"\n

The\u00a0border-collapse<\/code>\u00a0property is for use on\u00a0<table><\/code>\u00a0elements (or elements made to behave like a table through\u00a0display: table<\/code>\u00a0or\u00a0display: inline-table<\/code>).<\/p>\n\n\n\n\n\n\n

Syntax<\/h3>\n\n\n
border-collapse: collapse | separate;<\/code><\/pre>\n\n\n\n
  • Initial value:<\/strong> separate<\/code><\/li>
  • Applies to: <\/strong>table<\/code>\u00a0and\u00a0inline-table<\/code>\u00a0elements<\/li>
  • Inherited:<\/strong> yes<\/li>
  • Computed value:<\/strong> as specified<\/li>
  • Animation type:<\/strong> discrete<\/li><\/ul>\n\n\n
    Values<\/h3>\n\n\n
    \/* Keyword values *\/\nborder-collapse: collapse;\nborder-collapse: separate;\n\n\/* Global values *\/\nborder-collapse: inherit;\nborder-collapse: initial;\nborder-collapse: revert;\nborder-collapse: revert-layer;\nborder-collapse: unset;<\/code><\/pre>\n\n\n\n
    • separate<\/code> (default)<\/strong> – in which all table cells have their own independent borders and there may be space between those cells as well.<\/li>
    • collapse<\/code> – in which both the space and the borders between table cells collapse so there is only one border and no space between cells.<\/li><\/ul>\n\n\n\n
      When border-collapse<\/code> is collapse<\/code>, it is notable that properties like border-spacing<\/code><\/a> and border-radius<\/code><\/a> (on actual borders) don’t do anything. You’ll need border-collapse: separate;<\/code> if you need either of those things.<\/p>\n\n\n\n
      Here’s an example where you can swap between the two:<\/p>\n\n\n\n