Question is simple: How can I make the orange bottom border cross over the blue one, not under?
* {
box-sizing: border-box;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td {
border-right: 6px solid blue;
border-bottom: 6px solid orange;
}
<table>
<tr><td>aaa</td><td>aaa</td></tr>
<tr><td>aaa</td><td>aaa</td></tr>
</table>
One of the possible solutions is in my answer below, but it's rather hacky one and I'm curious whether there is prettier one?
EDIT: I know that's the default behaviour rather than a bug, as per this answer, I just want to override it.