.pixel-corners,
.pixel-corners--wrapper {
  clip-path: polygon(
    0px calc(100% - 24px),
    4px calc(100% - 24px),
    4px calc(100% - 16px),
    8px calc(100% - 16px),
    8px calc(100% - 12px),
    12px calc(100% - 12px),
    12px calc(100% - 8px),
    16px calc(100% - 8px),
    16px calc(100% - 4px),
    24px calc(100% - 4px),
    24px 100%,
    calc(100% - 24px) 100%,
    calc(100% - 24px) calc(100% - 4px),
    calc(100% - 16px) calc(100% - 4px),
    calc(100% - 16px) calc(100% - 8px),
    calc(100% - 12px) calc(100% - 8px),
    calc(100% - 12px) calc(100% - 12px),
    calc(100% - 8px) calc(100% - 12px),
    calc(100% - 8px) calc(100% - 16px),
    calc(100% - 4px) calc(100% - 16px),
    calc(100% - 4px) calc(100% - 24px),
    100% calc(100% - 24px),
    100% 24px,
    calc(100% - 4px) 24px,
    calc(100% - 4px) 16px,
    calc(100% - 8px) 16px,
    calc(100% - 8px) 12px,
    calc(100% - 12px) 12px,
    calc(100% - 12px) 8px,
    calc(100% - 16px) 8px,
    calc(100% - 16px) 4px,
    calc(100% - 24px) 4px,
    calc(100% - 24px) 0px,
    24px 0px,
    24px 4px,
    16px 4px,
    16px 8px,
    12px 8px,
    12px 12px,
    8px 12px,
    8px 16px,
    4px 16px,
    4px 24px,
    0px 24px
  );
  position: relative;
}
.pixel-corners {
  border: 4px solid transparent;
}
.pixel-corners--wrapper {
  width: fit-content;
  height: fit-content;
}
.pixel-corners--wrapper .pixel-corners {
  display: block;
  clip-path: polygon(
    4px 24px,
    8px 24px,
    8px 16px,
    12px 16px,
    12px 12px,
    16px 12px,
    16px 8px,
    24px 8px,
    24px 4px,
    calc(100% - 24px) 4px,
    calc(100% - 24px) 8px,
    calc(100% - 16px) 8px,
    calc(100% - 16px) 12px,
    calc(100% - 12px) 12px,
    calc(100% - 12px) 16px,
    calc(100% - 8px) 16px,
    calc(100% - 8px) 24px,
    calc(100% - 4px) 24px,
    calc(100% - 4px) calc(100% - 24px),
    calc(100% - 8px) calc(100% - 24px),
    calc(100% - 8px) calc(100% - 16px),
    calc(100% - 12px) calc(100% - 16px),
    calc(100% - 12px) calc(100% - 12px),
    calc(100% - 16px) calc(100% - 12px),
    calc(100% - 16px) calc(100% - 8px),
    calc(100% - 24px) calc(100% - 8px),
    calc(100% - 24px) calc(100% - 4px),
    24px calc(100% - 4px),
    24px calc(100% - 8px),
    16px calc(100% - 8px),
    16px calc(100% - 12px),
    12px calc(100% - 12px),
    12px calc(100% - 16px),
    8px calc(100% - 16px),
    8px calc(100% - 24px),
    4px calc(100% - 24px)
  );
}
.pixel-corners::after,
.pixel-corners--wrapper::after {
  content: "";
  position: absolute;
  clip-path: polygon(
    0px calc(100% - 24px),
    4px calc(100% - 24px),
    4px calc(100% - 16px),
    8px calc(100% - 16px),
    8px calc(100% - 12px),
    12px calc(100% - 12px),
    12px calc(100% - 8px),
    16px calc(100% - 8px),
    16px calc(100% - 4px),
    24px calc(100% - 4px),
    24px 100%,
    calc(100% - 24px) 100%,
    calc(100% - 24px) calc(100% - 4px),
    calc(100% - 16px) calc(100% - 4px),
    calc(100% - 16px) calc(100% - 8px),
    calc(100% - 12px) calc(100% - 8px),
    calc(100% - 12px) calc(100% - 12px),
    calc(100% - 8px) calc(100% - 12px),
    calc(100% - 8px) calc(100% - 16px),
    calc(100% - 4px) calc(100% - 16px),
    calc(100% - 4px) calc(100% - 24px),
    100% calc(100% - 24px),
    100% 24px,
    calc(100% - 4px) 24px,
    calc(100% - 4px) 16px,
    calc(100% - 8px) 16px,
    calc(100% - 8px) 12px,
    calc(100% - 12px) 12px,
    calc(100% - 12px) 8px,
    calc(100% - 16px) 8px,
    calc(100% - 16px) 4px,
    calc(100% - 24px) 4px,
    calc(100% - 24px) 0px,
    24px 0px,
    24px 4px,
    16px 4px,
    16px 8px,
    12px 8px,
    12px 12px,
    8px 12px,
    8px 16px,
    4px 16px,
    4px 24px,
    0px 24px,
    0px 50%,
    4px 50%,
    4px 24px,
    8px 24px,
    8px 16px,
    12px 16px,
    12px 12px,
    16px 12px,
    16px 8px,
    24px 8px,
    24px 4px,
    calc(100% - 24px) 4px,
    calc(100% - 24px) 8px,
    calc(100% - 16px) 8px,
    calc(100% - 16px) 12px,
    calc(100% - 12px) 12px,
    calc(100% - 12px) 16px,
    calc(100% - 8px) 16px,
    calc(100% - 8px) 24px,
    calc(100% - 4px) 24px,
    calc(100% - 4px) calc(100% - 24px),
    calc(100% - 8px) calc(100% - 24px),
    calc(100% - 8px) calc(100% - 16px),
    calc(100% - 12px) calc(100% - 16px),
    calc(100% - 12px) calc(100% - 12px),
    calc(100% - 16px) calc(100% - 12px),
    calc(100% - 16px) calc(100% - 8px),
    calc(100% - 24px) calc(100% - 8px),
    calc(100% - 24px) calc(100% - 4px),
    24px calc(100% - 4px),
    24px calc(100% - 8px),
    16px calc(100% - 8px),
    16px calc(100% - 12px),
    12px calc(100% - 12px),
    12px calc(100% - 16px),
    8px calc(100% - 16px),
    8px calc(100% - 24px),
    4px calc(100% - 24px),
    4px 50%,
    0px 50%
  );
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #acc2ed;
  display: block;
  pointer-events: none;
}
.pixel-corners::after {
  margin: -4px;
}