<div class="card">
  <svg class="card__background">
    <defs>
      <mask id="mask-background">
        <rect width="100%" height="100%" fill="#fff" />
        <svg width="100%" height="45" viewBox="0 0 298 90" preserveAspectRatio="xMidYMin meet">
          <path d="M0,0H.18A20.09,20.09,0,0,1,18,10.84,148,148,0,0,0,149,90,148,148,0,0,0,280.05,10.84,20.09,20.09,0,0,1,297.82,0H298V-4H0Z" fill="#000" />
        </svg>
      </mask>

      <filter id="inset-stroke">
        <feFlood flood-color="#f00" result="borderColor" />
        <feComposite in="borderColor" in2="SourceAlpha" operator="in" result="borderShape" />
        <feMorphology in="borderShape" operator="erode" radius="5" result="borderShapeIn" />
        <feMorphology in="borderShape" operator="erode" radius="6" result="borderShapeOut" />
        <feComposite in="borderShapeIn" in2="borderShapeOut" operator="out" result="borderStroke" />
        <feComponentTransfer in="borderStroke" result="borderStrokeOpacity">
          <feFuncA type="linear" slope="0.5" />
        </feComponentTransfer>
        <feMerge>
          <feMergeNode in="SourceGraphic" />
          <feMergeNode in="borderStrokeOpacity" />
        </feMerge>
      </filter>
    </defs>

    <g filter="url(#inset-stroke)">
      <rect width="100%" height="100%" rx="20" mask="url(#mask-background)" fill="#fff" />
    </g>
  </svg>

  <div class="card__content">
    <figure class="card__photo">
      <img class="card__image" src="https://images.unsplash.com/photo-1526336024174-e58f5cdd8e13?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="">
    </figure>
    <div class="card__text">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis laborum modi amet quia quae explicabo ea cumque molestias culpa facere soluta eligendi corporis in, deleniti suscipit iure commodi autem nobis cum fugit? Explicabo asperiores pariatur repellendus error recusandae repellat consectetur maiores eaque dolor, ipsam quam iure eum veniam laborum possimus reprehenderit laudantium ducimus saepe, ipsa voluptatem nobis consequatur, eveniet eius itaque. Harum hic ipsa cupiditate quod sequi, laboriosam architecto nobis illo, minima officia, officiis expedita cumque tenetur fugiat quaerat omnis aliquid quae voluptate sit! Eligendi accusamus labore animi incidunt voluptate quo corporis eius dolor optio obcaecati consequatur, quidem dolores sed.
    </div>
  </div>
</div>

body {
  margin: 150px 0 0 0;
}

.card {
  position: relative;
  width: 70%;
  margin: 0 auto;
  z-index: 0;
}

.card__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 10px rgba(0,0,0,0.25));
  z-index: -1;
}

.card__content {
  position: relative;
  padding: 60px 25px 40px;
}

.card__photo {
  top: 0;
  left: 50%;
  transform: translate(-50%, -100px);
  position: absolute;
  margin: 0;
  width: 135px;
  height: 135px;
}

.card__image {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}