JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
 <div class="circle">

   
 </div>
</div>

CSS

body {
  background: #E94E3D;
}
.wrap {
  margin: 100px auto;
  width: 130px;
}
.circle {
  position: relative;
  overflow: hidden;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: orange;
  box-shadow: 60px -60px 0 2px #e94e3d, -60px -60px 0 2px #e94e3d, -60px 60px 0 2px #e94e3d, 60px 60px 0 2px #e94e3d, 0 0 0 2px #e94e3d;
}
.circle:hover {
  animation: border .4s ease 1 forwards;
  cursor: none;
}
@keyframes border {
  0% {
    box-shadow: 60px -60px 0 2px #e94e3d, -60px -60px 0 2px #e94e3d, -60px 60px 0 2px #e94e3d, 60px 60px 0 2px #e94e3d, 0 0 0 2px #e94e3d;
  }
  25% {
    box-shadow: 0 -125px 0 2px #e94e3d, -60px -60px 0 2px #e94e3d, -60px 60px 0 2px #e94e3d, 60px 60px 0 2px #e94e3d, 0 0 0 2px #ffffff;
  }
  50% {
    box-shadow: 0 -125px 0 2px #e94e3d, -125px 0px 0 2px #e94e3d, -60px 60px 0 2px #e94e3d, 60px 60px 0 2px #e94e3d, 0 0 0 2px #ffffff;
  }
  75% {
    box-shadow: 0 -125px 0 2px #e94e3d, -125px 0px 0 2px #e94e3d, 0px 125px 0 2px #e94e3d, 60px 60px 0 2px #e94e3d, 0 0 0 2px #ffffff;
  }
  100% {
    box-shadow: 0 -125px 0 2px #e94e3d, -125px 0px 0 2px #e94e3d, 0px 125px 0 2px #e94e3d, 120px 40px 0 2px #e94e3d, 0 0 0 2px #ffffff;
  }
}