CSSでアウトラインを曲げるにはどうすればよいですか？

ここにいくつかの box-shadow に依存するアイデアがあります 、 border  要素間のリンクを作成する擬似要素：

.out {
  display: inline-block;
  border-radius: 30px;
  width: 120px;
  height: 50px;
  box-shadow: 0 0 0 3px #fff inset, 0 0 0 50px lightblue inset;
  border: 2px dashed red;
  position: relative;
}
.out:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -8px;
  top: calc(50% - 5px);
  width: 9px;
  height: 10px;
  border-top: 2px dashed red;
  border-bottom: 2px dashed red;
  z-index: 1;
  box-shadow: 0 0 0 3px #fff inset, 0 0 0 50px lightblue inset;
}
.out:not(:last-child):before {
  content: "";
  position: absolute;
  right: -40px;
  top: calc(50% - 1.5px);
  width: 60px;
  height: 5px;
  z-index: 3;
  background: lightblue;
}

<div>
  <div class="out">
  </div>
  <div class="out">
  </div>
  <div class="out">
  </div>
  <div class="out">
  </div>
</div>