How to create a profile photos row with css?

Question

i'm trying to create a row with many photos, example;

but i'm having trouble to create the border radius negative.

like this.

i've been trying in this codepen

CodePen

HTML

   <div class="d-flex">
  <a class="d-inline">
    <img alt="project member" class="rounded-circle thumb48" src="https://i.imgur.com/C7sGXc6.png">
  </a>
  <div class="d-inline person">
    <img alt="project member" class="rounded-circle thumb48" src="https://i.imgur.com/C7sGXc6.png">
  </div>
  <a class="d-inline">
    <img alt="project member" class="rounded-circle thumb48" src="https://i.imgur.com/C7sGXc6.png">
  </a>
</div>

CSS

.thumb48{
  width: 48px !important;
  height: 48px !important;
}
.rounded-circle{
  border-radius: 50% !impor
}
.d-flex{
  display:flex !important;
}
.d-inline{
  display: inline !importante;
}

.person{
  background-color:red;
  position:relative;
}

.person:before
{
    width: 10px;;
    height: 68px;
    border-radius:0 50% 50% 0;
    background-color:#FFF;    
    display:inline-block;
    vertical-align: middle;
    content: '';
}

Answer 1

You can achieve this cutout effect by putting a solid border on each image that is the same colour as the background:

<div class="circle-overlap">
    <img alt="project member" src="https://i.imgur.com/C7sGXc6.png">
    <img alt="project member" src="https://i.imgur.com/C7sGXc6.png">
    <img alt="project member" src="https://i.imgur.com/C7sGXc6.png">
</div>

.circle-overlap img {
  width: 50px;
  border-radius: 50%;
  border: solid white 5px; // Change to a different colour to visualise more clearly what’s happening
  margin-right: 2px;
  position: relative;
  background: teal;
}

.circle-overlap img:nth-of-type(2) {
  left: -25px;
  z-index: -1;
}

.circle-overlap img:nth-of-type(3) {
  z-index: -2;
  left: -50px;
}