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.
table {
  border-collapse: separate; /* Or do nothing, this is default */
  border-spacing: 3px; /* Only works if border-collapse is separate */
table {
  border-collapse: collapse;

Browser Support

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


  1. jana
    Permalink to comment#
  2. Simon
    Permalink to comment#

    You wrote:
    /* Or do nothing, this is default */ on both CSS examples
    Didn’t understand.

    • Jarrod
      Permalink to comment#

      Simon, the default is “separate” – ignore the /* comment */

  3. lukasz krawczyk
    Permalink to comment#

    Simple but very usefull thing to work with tables. Btw. nice idea with this almanac :)

  4. Kiefer
    Permalink to comment#

    I used this and it did exactly what I was looking for to fix an IE9 issue but it took away my box-shadow. Any idea how to get the best of both of these?


    • Dimitrios Savvopoulos

      @email to fax: your question is out of topic.

      Btw you might want to consider removing the position absolute from the elements.

  5. email to fax


    I use #wrap { display:table;border-collapse: collapse; border:1px solid #cccc},

    So how can I get the border to be complete?

    I created a jsfiddle with my complete code (except for the images).

    Thank you

  6. Sagan Internet Marketing
    Permalink to comment#

    So border-collapse more or less hides the top border… which means if you want to ‘highlight’ a row by changing the border colors, you must change the border-bottom of both the row that you want highlighted and the previous row… which very unfortunately rules out CSS to accomplish this… at least for now, until ‘!’ gets added to modern browsers.

  7. Sagan Internet Marketing
    Permalink to comment#

    Actually, I got the highlight effect to work with box-shadow:
    tr:hover td { position: relative; box-shadow: 0px 0px 1px #333; }

    • Ben
      Permalink to comment#

      Awesome idea man – came here looking for exactly a solution to this problem, Cheers

    • A2D
      Permalink to comment#

      Great idea, but doesn’t work if you want to highlight a specific cell by changing border color – think of highlighting “today” in a calendar. Don’t ask why, that’s the design…
      Had to do something like this to create the “missing” top border:

      /* assuming a 2px border around cells and highlight bordercolor #c00 */
      .highlighted_cell {
          border-color: #c00;
      .highlighted_cell:before {
          content: "";
          position: absolute;
          border: 1px solid #c00;
          top: -2px;
          left: -2px;
          width: calc(100% + 4px);
    • Herman
      Permalink to comment#

      Any idea to make that work on just the tr:hover (to highlight with a border around the whole row, not each individual cell) ?

  8. Adam Dehnel
    Permalink to comment#

    I found it odd that the border-spacing shorthand syntax is left/right and then top/bottom as opposed to the seemingly standard box-model shorthands of top/bottom and then left/right. Rather this one uses the ‘x-axis’ and ‘y-axis’ values like background-position or the like. Might be worth noting in the example code.

    For an example of what I’m talking about:

  9. Manidip Banerjee
    Permalink to comment#

    Hi, I am using a mobile responsive free WordPress theme that some how removes the table border of any HTML table. I tried to specify the border in this way


    table class=”aligncenter” border=”1″ cellspacing=”1″ cellpadding=”1″ align=”center”>

    in posts, still, the border is now showing up.

    I found the following code in the source code or rather in the styles.css file

    table {
    border-collapse: collapse;

    I tried to override that with

    table {
    border-collapse: separate;
    border-spacing: 1px;

    But it’s not working. Would you please tell me what’s exact reason behind this.
    Thanks in advance!

    • RoyD
      Permalink to comment#

      Mandip, did you get a reply to this issue? I have a similar problem with WordPress and would welcome a solution

  10. Gerson L

    Awesome, just what I was looking for!

  11. Fesh
    Permalink to comment#

    There is an issue with border-collapse: collapse that has a rowspan on Firefox. The URL for the bug is at

  12. Muhammad Tayyab
    Permalink to comment#

    nice article (Y) it help me alot to solve my confusion about collapse and separate. it is very informative and best website for web developing.
    Keep it up bro . :)

  13. Guillaume Bois

    Could be cool also if you add the default example (seperate and spacing 0) which is funny because it is the ugliest of all possible solution!

  14. Joshua Ballesteros
    Permalink to comment#

    I’ve use a table and the border-radius the corner. Problem is when it is collapse border radius is not working.

    —— ads ——-
    My Website

  15. Brandie
    Permalink to comment#

    Hi all, I work in a CMS on our website and recently learned (taught myself) to work in the source code which has helped me make things much more consistent! I noticed this with a table in this link and tried to go into fix it, but I cannot see this issue in the code; here is the “Main Office part of the code that clearly shows as messed up, both in IE and in Chrome. Any advice?
    table border=”0″ cellpadding=”1″ cellspacing=”1″ style=”height:80px; width:511px”>

    Main Office



Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.