你可以使用面具：

.box {
  width: 250px;
  height: 100px;
  border: 10px solid;
  border-radius: 999px;
  margin: 10px;
  
  -webkit-mask:
    linear-gradient(#000 0 0) no-repeat
      70% 0/80px 10px, /* 70%: control the position | 80px: control the width | 10px: equal to border thickness */
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

body {
  background: linear-gradient(90deg,pink,lightblue);
}

个字符

不确定这是否可以完全使用CSS规则，所以我的解决方案是创建一个SVG图像并将其设置为背景图像。

body {
  background-image: url("https://picsum.photos/seed/picsum/200/300");
}

div {
  width: 116px;
  height: 46px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="116" height="46" viewBox="0 0 116 46" fill="none"><path d="M53 3H23C23 3 3 3 3 23C3 43 23 43 23 43H93C93 43 113 43 113 23C113 3 93 3 93 3H83" stroke="black" stroke-width="5"/></svg>');
  background-repeat: no-repeat;
  box-sizing: border-box;
  padding: 5px;
  border-radius: 999px;
}

个字符