<div id="wrap">

  <!-- section -->
  <div class="section">
    <div class="center">

      <div id="bordered"></div>

    </div>
  </div>
  <!--/section -->

</div>

html,
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: #555;
  background: #fbffa3;
  animation: changeBg 5s linear infinite;
}

@keyframes changeBg {
  0%, 100% {
    background: #fbffa3;
  }
  
  25% {
    background: #a3ffff;
  }
  
  50% {
    background: #ffb1a3;
  }
  
  75% {
    background: #ffa3f4;
  }
}

* {
  box-sizing: border-box;
}

#wrap {
  position: relative;
}

.section {
  padding: 40px;
}

@borderW: 4px;

#bordered {
  width: 200px;
  height: 100px;
  background: #1daa4e;
  margin: auto;
  position: relative;

  &::before {
    content: '';
    display: block;
    position: absolute;
    top: -10px;
    right: -10px;
    bottom: -10px;
    left: -10px;
    border: @borderW solid #f00;
    animation: clipRotate 4s linear infinite;
  }
}

@keyframes clipRotate {

  0%,
  100% {
    clip-path: polygon(0 0, 100% 0, 100% @borderW, 0 @borderW);
  }
  
  25% {
    clip-path: polygon(calc(~'100% -' @borderW) 0, 100% 0, 100% 100%, calc(~'100% -' @borderW) 100%);
  }
  
  50% {
    clip-path: polygon(0 calc(~'100% -' @borderW), 100% calc(~'100% -' @borderW), 100% 100%, 0 100%);
  }
  
  75% {
    clip-path: polygon(0 0, @borderW 0, @borderW 100%, 0 100%);
  }
}