How to achieve local transparency of borders in CSS?

Issue

How can I achieve the border effect as shown in the picture?

My previous solution was to use pseudo elements to achieve the effect of a mask layer. But if my background is an image or gradient, it will be difficult to adjust the color of the mask layer. How can I achieve local transparency of the border and directly obtain the background color?

Solution

You can use mask:

.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);
}

<div class="box"></div>
<div class="box" style="width: 400px"></div>
<div class="box" style="width: auto"></div>

Answered By - Temani Afif