* {
  box-sizing: border-box;
}

/* Kontener dla divów z paddingiem */

.outer-div {
  width: 120px;
  height: 60px;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: #f0f0f0;
  animation: animateBorderCounterclockwise 8s linear infinite;
}

/* Wewnętrzny div */

.inner-div {
  width: 110px;
  height: 50px;
  position: absolute;
  animation: animateBorderClockwise 8s linear infinite;
}

/* Animacja rysowania obwodu wewnętrznego diva zgodnie z ruchem wskazówek zegara */

@keyframes animateBorderClockwise {
  0% {
    border: 2px solid transparent;
    border-top: 2px solid #000;
  }
  25% {
    border: 2px solid transparent;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
  }
  50% {
    border: 2px solid transparent;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
  }
  75% {
    border: 2px solid transparent;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    border-left: 2px solid #000;
  }
  100% {
    border: 2px solid #000;
  }
}

/* Animacja zewnętrznego diva (odwrotny kierunek, przeciwnie do wskazówek zegara) */

@keyframes animateBorderCounterclockwise {
  0% {
    border: 2px solid transparent;
    border-top: 2px solid #000;
  }
  25% {
    border: 2px solid transparent;
    border-top: 2px solid #000;
    border-left: 2px solid #000;
  }
  50% {
    border: 2px solid transparent;
    border-top: 2px solid #000;
    border-left: 2px solid #000;
    border-bottom: 2px solid #000;
  }
  75% {
    border: 2px solid transparent;
    border-top: 2px solid #000;
    border-left: 2px solid #000;
    border-bottom: 2px solid #000;
    border-right: 2px solid #000;
  }
  100% {
    border: 2px solid #000;
  }
}