corner-shape

Limited support Reference ↗

corner-shape changes how an existing border radius is drawn. Bevels, notches, scoops, and squircles no longer require masks.

.card {
  border-radius: 2rem;
  corner-shape: squircle;
}

.ticket {
  border-radius: 1rem;
  corner-shape: scoop;
}

The property has no effect without border-radius. Unsupported browsers keep the ordinary rounded corner, which makes it a good visual enhancement.