As the corner shapes demo, let’s end with rounded avatars. Build your own regular polygon, right from CSS.

.el {
  background: url(...);
  border-radius: 50%;
}
@supports (background: paint(id)) {
  .el.is-loaded {
    border-radius: 0;
    mask-image: paint(avatar-polygon);
    --avatar-sides: 12;
    --avatar-angle: 0deg;
  }
}