JSFiddle - React, Tailwind, and code Playground

HTML

<div class="foo">
    <span class="border-top"></span>
    <span class="border-left"></span>
    <span class="border-right"></span>
    <span class="border-bottom"></span>
</div>

CSS

.foo {
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        width: 200px; height: 200px;
        margin: auto;
        background: red;
        overflow: hidden; /* comment me to see how it works */
    }

    span[class*='border'] {
        display: block;
        position: absolute;
        width: 400px;
        height: 5px;
    }

    .border-left {
        left: 0;
        top: -4px;
        border-top: 4px dashed black;
        -webkit-transform-origin: left center;
        -webkit-transform: rotate(90deg);
        -webkit-animation: movec 4s infinite linear alternate;
    }

    .border-right {
        left: calc(100% - 4px);
        top: -4px;
        border-top: 4px dashed black;
        -webkit-transform-origin: left center;
        -webkit-transform: rotate(90deg) translateX(-50%);
        -webkit-animation: moveb 4s linear infinite alternate;
    }

    .border-bottom {
        bottom: 0;
        border-bottom: 4px dashed black;
        -webkit-animation: movea 4s infinite linear alternate;
    }

    .border-top {
        -webkit-transform: translateX(-50%);
        -webkit-animation: move 4s infinite linear alternate;
        border-top: 4px dashed black;
    }

    @-webkit-keyframes move {
        to {
            -webkit-transform: translateX(0);
        }
    }

    @-webkit-keyframes movea {
        to {
            -webkit-transform: translateX(-50%);
        }
    }

    @-webkit-keyframes moveb {
        to {
            -webkit-transform: rotate(90deg) translateX(0);
        }
    }

    @-webkit-keyframes movec {
        to {
            -webkit-transform: rotate(90deg) translateX(-50%);
        }
    }