2

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.

burtek
  • 2,576
  • 7
  • 29
  • 37

1 Answers1

3

The solution we came up with is using :after pseudo-element rather than border. It works, but is not really as pretty as we'd like it to be:

* {
  box-sizing: border-box;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td:after {
  content: '\00a0';
  background: orange;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  display: inline-block;
}

td {
  position: relative;
  background: white;
  padding-right: 6px;
  
  border-bottom: 6px solid blue;
}
<table>
    <tr><td>aaa</td><td>aaa</td></tr>
    <tr><td>aaa</td><td>aaa</td></tr>
</table>

I have no idea how to achieve this with borders only.

burtek
  • 2,576
  • 7
  • 29
  • 37