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

.pixel-corners:hover::after {
  background: black;
}

.progress.pixel-corners:hover::after {
  background: #4C8F6E;
}