どうも7noteです。線が欠けている（途切れている）borderの作り方

方法としては、borderの上に背景と同じ色の疑似要素を重ねて消えてるように見せるやり方です。

完成見本

作り方

index.html

<div class="box">
  <!--内容書くところ-->
</div>

style.css

.box {
  width: 300px;
  height: 100px;
  border: solid 2px #e6e6e6;
  position: relative;
}

/* 疑似要素を重ねて置き、消えてるように見せる */
.box::before {
  content: "";
  width: 200px;
  height: 2px;
  background: #FFF;
  display: inline-block;
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
}

疑似要素の背景をグラデーションにして箱内だけ色を付けるのも可能

style.css

.box {
  width: 300px;
  height: 100px;
  background: #faa;
  border: solid 8px #e6e6e6;
  position: relative;
}

.box::before {
  content: "";
  width: 200px;
  height: 8px;
  background: linear-gradient(#fff 49% ,#faa 50%); /* ←グラデーションに変更 */
  display: inline-block;
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
}