如何为html输入添加微小的插入边框

是否可以添加边界打断？我没有找到正确的解决办法。也许我应该用伪元素和背景来做？我还不能在问题中插入图片，所以我附加了图片链接

---

您可以通过这种方式实现

*{
  box-sizing:border-box;
}
.border{
  border:2px solid pink;
  border-radius:5px;
  height:34px;
  position:relative;
}
.border input{
  width:100%;
  height:30px;
  border:0;
  padding:5px 8px;
  border-radius:5px;
}
.border:after{
  content:"";
  position:absolute;
  width:6px;
  height:2px;
  background:#fff;
  left:50%;
  top:-2px;
  margin-left:-3px;
}
.border:before{
  content:"";
  position:absolute;
  width:6px;
  height:2px;
  background:#fff;
  left:50%;
  bottom:-2px;
  margin-left:-3px;
}

<div class="border">
    <input class="" />
</div>

*{
框大小：边框框；
}
.边界{
边框：2件纯红；
边界半径：5px；
高度：34px；
位置：相对位置；
}
.边界输入{
宽度：100%；
高度：30px；
边界：0；
填充：5px 8px；
边界半径：5px；
}
.边界：之后{
内容：“；
位置：绝对位置；
宽度：6px；
高度：2倍；
背景：#fff；
左：50%；
顶部：-2px；
左边距：-3px；
}
.边界：之前{
内容：“；
位置：绝对位置；
宽度：6px；
高度：2倍；
背景：#fff；
左：50%；
底部：-2px；
左边距：-3px；
}

---

哦，非常感谢！我明白主要的意思