Adding border to webkit-mask-image

Question

I have two containers and I want to link them with a negative-rounded-ish div : JSFIddle

HTML:

<div class="div"></div>
  
  <div class="d-flex">
  <div class="p1"></div>
  <div class="p2"></div>
  </div>
    
<div class="div"></div>

CSS:

.div { 
background:#e0e0e0;
border:solid 1px red;
padding:10px;
border-radius:5px
}

.p1 {
  background:#e0e0e0;
  width: 25px;height: 10px;
  -webkit-mask-image: radial-gradient(circle at left, transparent 0, transparent 19px, black 0px);
}

.d-flex { display:flex }

.p2 {
  background:#e0e0e0;
  width: 25px;  height: 10px;
  -webkit-mask-image: radial-gradient(circle at right, transparent 0, transparent 19px, black 0px);
}

Preview:

I want to know if I can extend borders to get sth like this

Answer 1

CSS tricks with before & after pseudo might help!

.div { 
background:#e0e0e0;
border:solid 1px red;
padding:10px;
border-radius:5px
}

.join {
  margin-left: 20px;
  background:#e0e0e0;
  width: 20px;
  height: 10px;
  overflow:hidden;
  position:relative;
  z-index:1;
  margin-top:-1px;
  margin-bottom: -1px;
}
.join:before, .join:after{
  content: '';
  height: 8px;
  width: 10px;
  position:absolute;
  border-radius:10px;
  border:1px solid red;
  background-color:#fff;
}
.join:before{
  left:-5px;
   border-left: 0;
}
.join:after{
  right:-5px;
   border-right: 0;
}

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

<div class="join"></div>

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