border-collapse

Avatar of Sara Cope
Sara Cope on (Updated on )

Let’s put those CSS skills to work! Claim $50 in free hosting credit on Cloudways with code CSSTRICKS.

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).

Syntax

border-collapse: collapse | separate;
  • Initial value: separate
  • Applies to: table and inline-table elements
  • Inherited: yes
  • Computed value: as specified
  • Animation type: discrete

Values

/* Keyword values */
border-collapse: collapse;
border-collapse: separate;

/* Global values */
border-collapse: inherit;
border-collapse: initial;
border-collapse: revert;
border-collapse: revert-layer;
border-collapse: unset;
  • 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:

Browser support

ChromeSafariFirefoxOperaIEAndroidiOS
YesYesYesYesYesYesYes