.movingBorder {
  --border-color: var(--bs-primary);
  --border-radius: var(--bs-border-radius);
  --border-uncheck-color: var(--bs-white);
  --border-size: var(--bs-border-width);
  --border-time: 4s;
  --border-offset: 0px;
  --border-style: var(--bs-border-style);
  border: var(--border-style) var(--border-size) var(--border-color);
  border-radius: var(--border-radius);
  position: relative;
  animation: animate-borders var(--border-time) linear;
}

@keyframes animate-borders {
  0% {
    border: var(--border-style) var(--border-size) var(--border-uncheck-color);
    border-left: var(--border-style) var(--border-size) var(--border-color);
    border-radius: var(--border-radius);
  }
  25% {
    border: var(--border-style) var(--border-size) var(--border-uncheck-color);
    border-left: var(--border-style) var(--border-size) var(--border-color);
    border-radius: var(--border-radius);
  }
  25.02% {
    border: var(--border-style) var(--border-size) var(--border-uncheck-color);
    border-left: var(--border-style) var(--border-size) var(--border-color);
    border-bottom: var(--border-style) var(--border-size) var(--border-color);
    border-radius: var(--border-radius);
  }
  50% {
    border: var(--border-style) var(--border-size) var(--border-uncheck-color);
    border-left: var(--border-style) var(--border-size) var(--border-color);
    border-bottom: var(--border-style) var(--border-size) var(--border-color);
    border-radius: var(--border-radius);
  }
  50.02% {
    border: var(--border-style) var(--border-size) var(--border-uncheck-color);
    border-left: var(--border-style) var(--border-size) var(--border-color);
    border-bottom: var(--border-style) var(--border-size) var(--border-color);
    border-right: var(--border-style) var(--border-size) var(--border-color);
    border-radius: var(--border-radius);
  }
  75% {
    border: var(--border-style) var(--border-size) var(--border-uncheck-color);
    border-left: var(--border-style) var(--border-size) var(--border-color);
    border-bottom: var(--border-style) var(--border-size) var(--border-color);
    border-right: var(--border-style) var(--border-size) var(--border-color);
    border-radius: var(--border-radius);
  }
  75.02% {
    border: var(--border-style) var(--border-size) var(--border-color);
    border-radius: var(--border-radius);
  }
}

.movingBorder::after {
  width: var(--border-size);
  background-color: var(--border-uncheck-color);
  height: 0px;
  position: absolute;
  bottom: 0;
  left: calc(var(--border-size) * -1);
  z-index: 1;
  animation: move_down 5s linear;
  animation-fill-mode: forwards;
  content: '';
  display: inline-block;
}

@keyframes move_down {
  0% {
    height: calc(100% + var(--border-offset));
    width: calc(var(--border-size) * -1);
    bottom: calc(var(--border-size) * -1);
    left: calc(var(--border-size) * -1);
  }
  25% {
    height: var(--border-size);
    width: var(--border-size);
    bottom: calc(var(--border-size) * -1);
    left: calc(var(--border-size) * -1);
  }
  25.01% {
    height: var(--border-size);
    width: calc(100% + var(--border-offset));
    bottom: calc(var(--border-size) * -1);
    left: calc(var(--border-size) * -1);
  }
  50% {
    height: var(--border-size);
    width: 0%;
    left: 100%;
    bottom: calc(var(--border-size) * -1);
  }
  50.01% {
    height: calc(100% + var(--border-offset));
    width: var(--border-size);
    left: 100%;
    bottom: calc(var(--border-size) * -1);
  }
  75% {
    height: 0;
    width: var(--border-size);
    left: 100%;
    bottom: 100%;
  }
  75.01% {
    height: var(--border-size);
    width: calc(100% + var(--border-offset));
    left: 0%;
    bottom: 100%;
  }
  99.01% {
    height: var(--border-size);
    width: 0;
    left: 0;
    bottom: 100%;
  }
}