<div class="card"></div>
<div class="card colorful"></div>

.card {
  --card-color: #fff;
  --pillar-size: 34px;
  --big-circle-r: 30px;
  --circle-r: 13px;
  --circle-d: calc(var(--circle-r) * 2);
  --circles-space: calc(var(--big-circle-r) + var(--pillar-size));
  --circle-extend-inset: calc(var(--circle-r) + var(--circles-space));
  --card-shadow: 0 10px 48px rgba(21, 44, 115, 0.15);

  filter: drop-shadow(var(--card-shadow));
  border-radius: 50px 0 50px 50px;
  background: 
   /* Big Circle Cutout */ radial-gradient(
        circle at 100% 0%,
        transparent var(--big-circle-r),
        var(--card-color) calc(var(--big-circle-r) + 1px)
      )
      0px var(--pillar-size) / calc(100% - var(--pillar-size)) 100% no-repeat
      no-repeat,
    /* Top Circle  */
      radial-gradient(
        circle closest-side,
        var(--card-color) 100%,
        transparent calc(100% + 1px)
      )
      calc(100% - var(--circles-space)) 0 / var(--circle-d) var(--circle-d)
      no-repeat no-repeat,
    /* Right Circle */
      radial-gradient(
        circle closest-side,
        var(--card-color) 100%,
        transparent calc(100% + 1px)
      )
      100% var(--circles-space) / var(--circle-d) var(--circle-d) no-repeat
      no-repeat,
    /* Top Circle Extend */
      linear-gradient(0deg, var(--card-color) 100%, var(--card-color) 100%) 0px
      var(--circle-r) / calc(100% - var(--circles-space))
      calc(100% - var(--circle-r)) no-repeat no-repeat,
    /* Right Gap fill Pillar */
      linear-gradient(0deg, var(--card-color) 100%, var(--card-color) 100%) 0px
      0px / calc(100% - var(--circle-extend-inset)) var(--circle-d) no-repeat
      no-repeat,
    /* Right Circle Extend  */
      linear-gradient(0deg, var(--card-color) 100%, var(--card-color) 100%) 100%
      var(--circle-extend-inset) / var(--circle-d) 100% no-repeat no-repeat,
    /* Right Gap fill Pillar */
      linear-gradient(0deg, var(--card-color) 100%, var(--card-color) 100%) 0
      var(--circles-space) / calc(100% - var(--circle-r)) 100% no-repeat
      no-repeat;

  width: 217px;
  min-height: 400px;
}

.colorful {
  background: 
   /* Big Circle Cutout */ radial-gradient(
        circle at 100% 0%,
        transparent var(--big-circle-r),
        #aea9da calc(var(--big-circle-r) + 1px)
      )
      0px var(--pillar-size) / calc(100% - var(--pillar-size)) 100% no-repeat
      no-repeat,
    /* Top Circle  */
      radial-gradient(
        circle closest-side,
        #918c8a 100%,
        transparent calc(100% + 1px)
      )
      calc(100% - var(--circles-space)) 0 / var(--circle-d) var(--circle-d)
      no-repeat no-repeat,
    /* Right Circle */
      radial-gradient(
        circle closest-side,
        #918c8a 100%,
        transparent calc(100% + 1px)
      )
      100% var(--circles-space) / var(--circle-d) var(--circle-d) no-repeat
      no-repeat,
    /* Right Gap fill Pillar */
      linear-gradient(0deg, #7fd0cd 100%, #7fd0cd 100%) 0px var(--circle-r) /
      calc(100% - var(--circles-space)) calc(100% - var(--circle-r)) no-repeat
      no-repeat,
    /* Right Gap fill Pillar */
      linear-gradient(0deg, #7fd0cd 100%, #7fd0cd 100%) 0 var(--circles-space) /
      calc(100% - var(--circle-r)) 100% no-repeat no-repeat,
    /* Top Circle Extend */ linear-gradient(0deg, #d07fc0 100%, #d07fc0 100%)
      0px 0px / calc(100% - var(--circle-extend-inset)) var(--circle-d)
      no-repeat no-repeat,
    /* Right Circle Extend  */ linear-gradient(0deg, #d07fc0 100%, #d07fc0 100%)
      100% var(--circle-extend-inset) / var(--circle-d) 100% no-repeat no-repeat;
}

body {
  background: pink;
  display: flex;
  gap: 20px;
  justify-content: space-evenly;
  align-items: center;
  overflow-x: auto;
}