在正方形周围创建四个局部边框

Question

我正在尝试围绕一个正方形创建四个边框，如下所示：

我确定可以通过:after实现，但是我只能指定一次:after（对于一个角），对于其他三个而言，我将如何实现呢？

到目前为止的代码：

div {
  width:330px; 
  height:100px; 
  background:#000; 
  position:relative;
 }
div:after {
  content:''; 
  width:60px; 
  height:4px; 
  background:red; 
  position:absolute; 
  bottom:-4px;
}

<div class="div">

</div>

编辑：

我以图片中的正方形为例。 overlapping div approach here，我认为这种情况不适用吗？在<button>上必须有边框，该边框的中间将有一个图像。