SOURCE

<div class="out">
    <div class="runline"></div>
</div>

.out{
    height: 400px;
    width: 300px;
    border:1px dashed #ccc;
}
.runline{
     height: 400px;
     width: 300px;
      background-position:  0 0, 0 0, 100% 0, 0 100%;
    background-repeat: no-repeat;
     background-image: 
         repeating-linear-gradient(0deg, #90cf5b, #90cf5b 12px, transparent 12px, transparent 30px),
         repeating-linear-gradient(90deg, #90cf5b, #90cf5b 12px, transparent 12px, transparent 30px), 
         repeating-linear-gradient(180deg, #90cf5b, #90cf5b 12px, transparent 12px, transparent 30px), 
         repeating-linear-gradient(270deg, #90cf5b, #90cf5b 12px, transparent 12px, transparent 30px) 
        ;
    background-size: 
        2px calc(100% + 10px), 
        calc(100% + 10px) 2px, 
        2px calc(100% + 10px), 
        calc(100% + 10px)2px;
    animation: borderAnimation 1s infinite linear;
}
@keyframes borderAnimation {
    from {
        background-position: 0 0, -30px 0, 100% -30px, 0 100%;
    }
    to {
        background-position: 0 -30px, 0 0, 100% 0, -30px 100%;
    }
}