如何摆脱边界相交的空白？

Question

我有一张由div制成的桌子，在一些水平和垂直边框重叠的单元格上有边框。如果边框的颜色不同（在这种情况下为黑色和透明），则边框重叠处会有一个很小的间隙。有办法摆脱这种差距吗？我只想让黑色边框优先于透明边框。

.container {
  width: 400px;
  height: 400px;
  display: flex;
  flex-flow: wrap;
}

.section {
  flex: 40%;
}

.bot {
  border-top: 4px solid transparent;
}

.right {
  border-left: 4px solid black;
}

<div class="container">
  <div class="top left section"></div>
  <div class="top right section"></div>
  <div class="bot left section"></div>
  <div class="bot right section"></div>
  <div class="bot left section"></div>
  <div class="bot right section"></div>
</div>

JSFiddle：https://jsfiddle.net/twshzrdm/