Estoy haciendo una *border* animado con CSS que aparece de arriba hacia abajo y el problema que tengo es que la parte superior y derecha aparecen detrás de la imagen, mientras que la parte inferior e izquierda delante de la imagen
[![introducir la descripción de la imagen aquí][1]][1]


  [1]: https://i.sstatic.net/2WpTz.png

¿Cómo podria hacer para que tanto la superior como la parte derecha aparezcan adelante de la imagen?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    /*****CSS*******/
    .hovereffect {
      overflow: hidden;
      position: absolute;
    }

    .hovereffect img {
      display: block;
      position: relative;
      width: 400px;
      border-radius: 50px;
    }

    .hovereffect::before, .hovereffect::after {
      content: '';
      box-sizing: border-box;
      position: absolute;
      border: 6px solid transparent;
      width: 0;
      height: 0;
    }

    .hovereffect::before {
      top: 0;
      left: 0;
      border-top-color: #F87600;
      border-right-color: #F87600;
      animation: border 2s infinite;
    }

    .hovereffect::after {
      bottom: 0;
      right: 0;
      animation: border 2s 1s infinite, borderColor 2s 1s infinite;
    }

    @keyframes border {
      0% {
        width: 0;
        height: 0;
      }
      25% {
        width: 100%;
        height: 0;
      }
      50% {
        width: 100%;
        height: 100%;
      }
      100% {
        width: 100%;
        height: 100%;
      }
    }
    @keyframes borderColor {
      0% {
        border-bottom-color: #F87600;
        border-left-color: #F87600;
      }
      50% {
        border-bottom-color: #F87600;
        border-left-color: #F87600;
      }
      51% {
        border-bottom-color: transparent;
        border-left-color: transparent;
      }
      100% {
        border-bottom-color: transparent;
        border-left-color: transparent;
      }
    }


<!-- language: lang-html -->

    <div class="hovereffect">   
        <img class="img-responsive" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/austin-fireworks.jpg" alt="">
    </div>

<!-- end snippet -->