使移动边框动画在方形元素上工作

我试图让一个移动的边框CSS动画在广场上工作,但我不知道如何让它工作.它在圆上工作正常,因为我只使用关键帧的旋转过渡.这是我目前的标记.

.box {
  width: 50px;
  height: 50px;
  margin: 50px auto;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  position: relative;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}
.box .border {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 50px;
  height: 50px;
  background: transparent;
  border: 4px solid transparent;
  border-top-color: orangered;
  border-radius: 50%;
  animation-name: border;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}
@-webkit-keyframes border {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }

polygon {
  stroke: red;
  stroke-width: 3;
  stroke-dasharray: 50, 750;
  stroke-dashoffset: 0;
  fill: none;
  animation: border 5s linear infinite;
}
@keyframes border {
  to {
    stroke-dashoffset: -800;
  }
}