How to give corner of table cell border the color of top/bottom border instead of the left/right border

Question

is there a way to influence what color would be the corner pixel of a div (or in my case th ) rendered, when the two neighboring sides of the corner have different colors?

It appears to me that no matter what I mark important or so the corner always gets the color of the side. But I would like to to use the border-top color for the corner pixel.

Like in the following example to give the first row a continuous black border and separate the cells with the ugly red and the rest of the table to be simply grey.

 table { border-collapse: collapse; text-align: center; } table tr td { border: 8px solid grey; } table tr:first-child { border: 8px solid black; } table tr th:not(:last-child) { border-right: 8px solid red; } table tr:not(:first-child) td { border-top: 0; } 

 I want: <table> <tr> <th> black-bordered </th> <th> row </th> <th> separated </th> <th> with </th> <th> reds </th> </tr> <tr> <td> everything </td> <td> below </td> <td> it </td> <td> simply </td> <td> grey </td> </tr> </table> 

I've also tried to remove the border-collapse , give a border to the tr element and a side border to the th s and set the border-spacing (which I just discovered) to zero. But the tr border didn't show up at all and it messes the rest of the table (which could be fixed, though).

Answer 1

You can get them with a pseudo element , which will be the size of the whole row + borders . Then reapply only top and bottom border.

 table { border-collapse: collapse; text-align: center; } table tr td { border: 8px solid grey; border-top: none; } table tr:first-child { border: 8px solid black; } table tr th:not(:last-child) { border-right: 8px solid red; } table tr th { position: relative; } table tr th::before { content: ""; position: absolute; top: -8px; left: -8px; width: calc(100% + 16px); height: 100%; border-width: 8px 0; border-color: black transparent; border-style: solid; } 

 I want: <table> <tr> <th> black-bordered </th> <th> row </th> <th> separated </th> <th> with </th> <th> reds </th> </tr> <tr> <td> everything </td> <td> below </td> <td> it </td> <td> simply </td> <td> grey </td> </tr> </table>