<div class="card"></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));

  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;
}

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.