How to avoid borders from collapsing

Question

This is a question keeping me busy for a while now.

As you can see in the fiddle I'm trying to set a border to the top of the cells. I want to achieve that the borders of the cells look like the border I gave the div. Have you got any idea how to do it? I already tried to set a border-image, but it wouldn't work, too.

possible duplicate of [CSS dotted border render issue](http://stackoverflow.com/questions/8822810/css-dotted-border-render-issue) — Jukka K. Korpela, Jul 12 '12 at 16:11
The question is not really about border collapse. It’s about rendering borders in a table at cell corners, and this is well covered in an older question. — Jukka K. Korpela, Jul 12 '12 at 16:12

Praveen Kumar Purushothaman · Accepted Answer · 2012-07-12T16:22:12.057

1

Are you saying this is what you are expecting: http://jsfiddle.net/35qgP/4/

table {
    width: 50%;
}
.border1 td {
    border-top: 3px solid red;
}
.border2 td {
    border-top: 1px dotted blue;
}
.border3 td {
    border-top: 1px dashed blue;
}

Or use a border-collapse: collapse; for all the tds this way:

td {border-collapse: collapse;}

edited Jul 12 '12 at 16:22

answered Jul 12 '12 at 15:29

Praveen Kumar Purushothaman

164,888
24
203
252

Hi, unfortunately not. As you can see the blue dots are doubled when the cell-borders are crossing. – user1437032 Jul 12 '12 at 15:32
There are no crossing borders. And there is no border collapse, as there are no adjacent borders. – Jukka K. Korpela Jul 12 '12 at 15:53
Hi...thanks for the information. Post it as an answer and I'll markt it as solved. I created a workaround though ;-) – user1437032 Jul 12 '12 at 15:58
@user1437032 Done with teh adding `border-collapse: collapse;` – Praveen Kumar Purushothaman Jul 12 '12 at 16:22

score 0 · Answer 2 · edited Jul 12 '12 at 15:31

0

Try this?

http://jsfiddle.net/35qgP/2/

edited Jul 12 '12 at 15:31

Rocky Pulley

22,531
20
68
106

answered Jul 12 '12 at 15:29

Billy Moat

20,792
7
45
37

Hi, the number of px does not matter. It's more that the blue dots are doubled. The eye catches the irregularity. – user1437032 Jul 12 '12 at 15:33

How to avoid borders from collapsing

2 Answers2