如何避免div之间外角的边界差距

Question

我正在使用边框绘制＆＃34;墙壁＆＃34;某些div之间，但不是其他div。我在每个div中添加一个实线边框以形成分隔符。目前我有一些看起来像这样的东西：

A和B设置了右/左边框，A / C设置了底部/顶部边框。 D没有国界。

当前CSS：Code Pen

.a {
  background-color: lightblue;
  border-right: 10px solid black;
  border-bottom: 10px solid black;
}
.b {
   background-color: cyan;
   border-left: 10px solid black;
}
.c {
  background-color: lightpink;
  border-top: 10px solid black;
}
.d{
  background-color: lightgreen;
}
.a, .b, .c, .d {
  width: 100px;
  height: 100px;
  float:left;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

我真的想消除D的角度中的小凹口。有一种简单的方法吗？