<div class="card product"></div>
<div class="card compare"></div>
<div class="card dropdown"></div>
.product {
  --circle-r: 13px /*input*/;
  --big-circle-r: 30px /*input*/;
  --pillar-size: max(34px /*input*/, var(--circle-r));
  --card-color: #fff /*input*/;
  --card-shadow: 0 10px 48px rgba(21, 44, 115, 0.15) /*input*/;

  width: 217px;
  min-height: 400px;
  border-radius: 50px;
}
.compare {
  --circle-r: 10px /*input*/;
  --big-circle-r: 25px /*input*/;
  --pillar-size: max(24px /*input*/, var(--circle-r));
  --card-color: #fff /*input*/;
  --card-shadow: 0 10px 48px rgba(21, 44, 115, 0.15) /*input*/;

  width: 300px;
  min-height: 140px;
  border-radius: 40px;
}
.dropdown {
  --circle-r: 20px /*input*/;
  --big-circle-r: 22px /*input*/;
  --pillar-size: max(23px /*input*/, var(--circle-r));
  --card-color: #fff /*input*/;
  --card-shadow: 0 10px 48px rgba(21, 44, 115, 0.15) /*input*/;

  width: 200px;
  min-height: 240px;
  border-radius: 25px;
}
.card {
  --circle-offset: calc(var(--big-circle-r) + var(--pillar-size) + var(--circle-r));
  --filler: conic-gradient(at right var(--circle-r) top var(--circle-r),#0000 25%,var(--card-color) 0);
  
  position: relative;
  border-top-right-radius: 0;
  filter: drop-shadow(var(--card-shadow));
  background: 
    /* Big Circle Cutout */
      radial-gradient(var(--big-circle-r) at 100% 0%,#0000 98%,var(--card-color))
      calc(-1*var(--pillar-size)) var(--pillar-size),
    /* Top Circle  */ 
      radial-gradient(var(--circle-r) at top var(--circle-r) right var(--circle-offset),
       var(--card-color) 98%,#0000),
    /* Right Circle */
      radial-gradient(var(--circle-r) at right var(--circle-r) top var(--circle-offset), 
       var(--card-color) 98%,#0000),
    /* Fillers */
      var(--filler) calc(-1*(var(--big-circle-r) + var(--pillar-size))) 0,
      var(--filler) 0 calc(var(--big-circle-r) + var(--pillar-size));
  background-repeat: no-repeat;
}


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.