Corners That Aren’t Round

/* border-radius sets the size of the corner.
   corner-shape sets what happens inside it. */
.card {
  border-radius: 42px;
  corner-shape: squircle;
}

/* Four values, same order as border-radius: TL TR BR BL */
.tag {
  border-radius: 34px 34px 18px 18px;
  corner-shape: scoop scoop round round;
}

/* Every keyword is a point on one curve, so you can sit between them:
   notch = superellipse(-infinity)   scoop  = superellipse(-1)
   bevel = superellipse(0)           round  = superellipse(1)
   squircle = superellipse(2)        square = superellipse(infinity) */
.dial {
  corner-shape: superellipse(1.4);
}

/* border-shape draws the border along any basic shape, including one
   with a bite taken out of it. clip-path would shave the border off. */
.ticket {
  border: 3px solid;
  border-shape: shape(
    from 20px 0px,
    line to calc(50% - 26px) 0px,
    arc to calc(50% + 26px) 0px of 26px ccw,
    line to calc(100% - 20px) 0px,
    arc to 100% 20px of 20px cw,
    /* ...and back around the bottom */
    close
  );
}