JSFiddle - React, Tailwind, and code Playground

HTML

<div class="image">
                <div class="border-wrapper">
                    <div class="placeholder"></div>
                    <div class="border-mask">
                        <svg xmlns="http://www.w3.org/2000/svg">
                          <defs>
                            <clipPath id="circleClip">
                              <path d="M0,0H200V200H-200zM5,0a40,40 0 1,0 80,0a40,40 0 1,0 -80,0" clip-rule="evenodd"/>
                            </clipPath>
                          </defs>
                        </svg>
                    </div>
                    <div class="placeholder"></div>
                </div>
            </div>

CSS

.image {
 background-image: url(https://s3.amazonaws.com/finely/resources/test.jpg);
    background-size: cover;
    background-position: center;
    width:100%;
    height:500px;
}

.border-wrapper {
    width:100%;
    height:100px;
    position: absolute;
    bottom:0px;
    left:0;
    display:flex;
    display:-webkit-flex;
    flex-flow: row;
    -webkit-flex-flow:row;
}


.placeholder {
    height:100px;
    width:calc(50% - 40px);
    background:white;

}

.border-mask {
    width:86px;
    height:100px;
    background: white;
    -webkit-clip-path: url(#circleClip);
    clip-path: url(#circleClip);
}

div {
  -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
     transform: translate3d(0,0,0);
}