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.

Answer 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;}