Meet corner-shape

.card {
  border-radius: 36px;
  corner-shape: round;
}

.card {
  border-radius: 36px;
  corner-shape: squircle;
}

.card {
  border-radius: 36px;
  corner-shape: bevel;
}

.card {
  border-radius: 36px;
  corner-shape: notch;
}

.card {
  border-radius: 36px;
  corner-shape: scoop;
}

.card {
  border-radius: 36px;
  /* cancels the radius out */
  corner-shape: square;
}

.card {
  border-radius: 36px;
  /* two values: TL+BR, TR+BL */
  corner-shape: notch superellipse(0.6);
}

.card {
  border-radius: 36px;
  /* one value per corner, clockwise */
  corner-shape: scoop notch squircle bevel;
}

.card {
  border-radius: 36px;
  /* fine-tune with the function */
  corner-shape: superellipse(-1.5);
}

.card {
  border-radius: 36px;
  /* higher = sharper "hyper-squircle" */
  corner-shape: superellipse(3);
}

@keyframes morph {
  0%   { corner-shape: squircle; }
  50%  { corner-shape: notch; }
  100% { corner-shape: bevel; }
}

.morph {
  border-radius: 50px;
  animation: morph 6s infinite alternate;
}