Is it possible to hide/remove borders inside of intersected area of multiple divs?

Question

When two or more div's intersect they just overlap and their borders are visible:

.circle {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid black;
}

#two {
  left: 50px;
}

#three {
  left: 100px;
}

<div >
  <div class="circle" id="one"></div>
  <div class="circle" id="two"></div>
  <div class="circle" id="three"></div>
</div>

The question is if it's possible to hide those border, that are inside of the intersected area so it looks like there is only one big shape. Taking the example above the result should look like this:

Answer 1

You can try using mask and adjust the code slightly to have better control. The trick is to use multiple mask where each one will be a circular gradient that will show only the border and each gradient will overlap each circle element. You can control the overlap using margin on the center element:

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid black;
  transition:0.5s;
}

.box {
  display:inline-flex;
  -webkit-mask:
     radial-gradient(50px at 52px              50%,transparent 99%,#fff 100%),
     radial-gradient(50px at 50%               50%,transparent 99%,#fff 100%),
     radial-gradient(50px at calc(100% - 52px) 50%,transparent 99%,#fff 100%);
  mask:
     radial-gradient(50px at 52px              50%,transparent 99%,#fff 100%),
     radial-gradient(50px at 50%               50%,transparent 99%,#fff 100%),
     radial-gradient(50px at calc(100% - 52px) 50%,transparent 99%,#fff 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

body {
  background:linear-gradient(to right,pink,yellow);
}

/* You can also have animation*/
.box:hover .circle{
   margin:0!important;
}

<div class="box">
  <div class="circle"></div>
  <div class="circle" style="margin:0 -50px;"></div>
  <div class="circle"></div>
</div>
<br>
<div class="box">
  <div class="circle"></div>
  <div class="circle" style="margin:0 -30px;"></div>
  <div class="circle"></div>
</div>
<br>
<div class="box">
  <div class="circle"></div>
  <div class="circle" style="margin:0 -70px;"></div>
  <div class="circle"></div>
</div>
<br>
<div class="box">
  <div class="circle"></div>
  <div class="circle" style="margin:0 -10px;"></div>
  <div class="circle"></div>
</div>

And with CSS variables to have better control:

.circle {
  width: calc(2*var(--r));
  height: calc(2*var(--r));
  border-radius: 50%;
  border: var(--b) solid black;
}

.box {
  --r:50px; /* radius of circles*/
  --b:2px;  /* border length */
  --g:transparent 99%,#fff 100%;
  
  display:inline-flex;
  -webkit-mask:
     radial-gradient(var(--r) at calc(var(--r) + var(--b))        50%,var(--g)),
     radial-gradient(var(--r) at 50%                              50%,var(--g)),
     radial-gradient(var(--r) at calc(100% - var(--r) - var(--b)) 50%,var(--g));
  mask:
     radial-gradient(var(--r) at calc(var(--r) + var(--b))        50%,var(--g)),
     radial-gradient(var(--r) at 50%                              50%,var(--g)),
     radial-gradient(var(--r) at calc(100% - var(--r) - var(--b)) 50%,var(--g));
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

body {
  background:linear-gradient(to right,pink,yellow);
}

<div class="box">
  <div class="circle"></div>
  <div class="circle" style="margin:0 -50px;"></div>
  <div class="circle"></div>
</div>
<br>
<div class="box" style="--r:40px;--b:5px;">
  <div class="circle"></div>
  <div class="circle" style="margin:0 -30px;"></div>
  <div class="circle"></div>
</div>
<br>
<div class="box" style="--r:100px;--b:20px;">
  <div class="circle"></div>
  <div class="circle" style="margin:0 -70px;"></div>
  <div class="circle"></div>
</div>
<br>
<div class="box" style="--r:80px;--b:5px;">
  <div class="circle"></div>
  <div class="circle" style="margin:0 -10px;"></div>
  <div class="circle"></div>
</div>