Using CSS to make table’s outer border color different from cells’ border color

I would acheive this by using adjacent selectors, like so:

table {
    border: 1px solid #000;
}

tr {
    border-top: 1px solid #000;
}

tr + tr {
    border-top: 1px solid red;
}

td {
    border-left: 1px solid #000;
}

td + td {
    border-left: 1px solid red;
}

It’s a little bit repetitive, but it acheives the effect you’re after by setting the top and left borders of the first row and column respectively, then overwriting the ‘internal’ rows and cells with red.

This won’t of course work in IE6 as it doesn’t understand the adjacent selectors.

http://jsfiddle.net/JaF5h/36/