pulsing-border.html

<style>
@-webkit-keyframes animateBorder {
  0% {
    background-position: left top, right top, right bottom, left bottom;
  }
  100% {
    background-position: right top, right bottom, left bottom, left top;
  }
}

.box {
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 5px;
}
.anim-border {
  background:
    linear-gradient(90deg, rgba(145, 116, 58, 0.5) 50%, transparent 50%),
    linear-gradient(0deg, rgba(145, 116, 58, 0.5) 50%, transparent 50%),
    linear-gradient(90deg, rgba(145, 116, 58, 0.5) 50%, transparent 50%),
    linear-gradient(0deg, rgba(145, 116, 58, 0.5) 50%, transparent 50%);
  background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
  background-size: 15px 3px, 3px 15px, 15px 3px, 3px 15px;
  background-position: left top, right top, left bottom, left top;
  -webkit-animation: animateBorder 10s infinite linear;
}
</style>

<div class="box anim-border">
  Hello
</div>