Border-collapse | CSS-Tricks

CSS Almanac → Properties → B → border-collapse

Sara Cope on Aug 31, 2011 (Updated on May 20, 2022)

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

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Yes	Yes	Yes	Yes	Yes	Yes	Yes

Almanac on Nov 17, 2022

border-spacing

.element { border-spacing: 5px; }

Chris Coyier

Almanac on Nov 10, 2022

border-radius

.element { border-radius: 10px; }

Sara Cope

Comments

jana

# December 16, 2011

Simon

# January 31, 2012

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

Jarrod

Permalink to comment# September 11, 2012

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

Permalink to comment# August 22, 2019

Which library you use for make sort command. Just like ul>li

lukasz krawczyk

# December 11, 2012

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

Kiefer

# April 3, 2013

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?

Thanks!
Kiefer

Dimitrios Savvopoulos

Permalink to comment# May 29, 2013

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

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

email to fax

# May 17, 2013

Hello,

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). http://jsfiddle.net/qHVk3/

Thank you

Sagan Internet Marketing

# October 28, 2013

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.

Sagan Internet Marketing

# October 28, 2013

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# February 24, 2015

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

Permalink to comment# April 10, 2016
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# April 13, 2016

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

Adam Dehnel

# January 25, 2014

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: http://codepen.io/arsdehnel/pen/cqjBs

Manidip Banerjee

# February 23, 2014

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# March 20, 2015

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

Gerson L

# May 1, 2014

Awesome, just what I was looking for!

Fesh

# June 19, 2014

There is an issue with border-collapse: collapse that has a rowspan on Firefox. The URL for the bug is at https://bugzilla.mozilla.org/show_bug.cgi?id=332740

Muhammad Tayyab

# November 11, 2014

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

Guillaume Bois

# May 28, 2015

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!

Joshua Ballesteros

# December 3, 2015

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 http://www.microuniver.com

Brandie

# August 16, 2016

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 https://www.brattbank.com/hours-holidays.htm 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

M-F

Sat.

Kaushik Bhadani

# October 18, 2016

i have same issue like milap had, i am not sure milap get solution for this but i have the same issue

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!

Ruslan

# December 22, 2017

A2D, nice solution thanks! Needed the “position: relative” on td for it to work.

Mohamed 3mara

# July 5, 2022

thank you for your Article, if i want to remove border spacing between head & body of table.
how can i do that ?