Corner shapes

Let’s stop with classic rounded corners. Draw beveled, scooped or notched corners.

.el {
  border-radius: 20px;
}
@supports (background: paint(id)) {
  .el.is-loaded {
    border-radius: 0;
    mask-image: paint(corner-shape);
    --corner-radius: 20px;
    --corner-shape: scoop;
  }
}