<div class="br">
   hello
</div>

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap');
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: black;
  font-family: 'Montserrat', sans-serif;
}
.br {
  width: 220px;
  height: 220px;
  border: 3px solid white;
  box-shadow: 0px 0px 0px 2px blue,inset 0px 0px 0px 2px blue, 0px 0px 20px 4px blue,inset 0px 0px 20px 4px blue;
  position:relative;
  color:white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
}
.br:before {
  z-index: -1;
  content:'';
  width: 220px;
  height: 220px;
  border: 3px solid white;
  box-shadow: 0px 0px 0px 2px purple,inset 0px 0px 0px 2px purple, 0px 0px 20px 4px purple,inset 0px 0px 20px 4px purple;
  position:absolute;
  left: -30px;
  top: -30px;  
  transition: 800ms;
  animation: neon 4s infinite;
}
@keyframes neon {
  0% {
     box-shadow: 0px 0px 0px 2px purple,inset 0px 0px 0px 2px purple, 0px 0px 20px 4px purple,inset 0px 0px 20px 4px purple;
  }
  25% {
      box-shadow: 0px 0px 0px 2px purple,inset 0px 0px 0px 2px purple, 0px 0px 20px 8px purple,inset 0px 0px 20px 8px purple;
  }
  50% {
      box-shadow: 0px 0px 0px 2px purple,inset 0px 0px 0px 2px purple, 0px 0px 20px 4px purple,inset 0px 0px 20px 4px purple;
  }
  75% {
     box-shadow: 0px 0px 0px 2px purple,inset 0px 0px 0px 2px purple, 0px 0px 2px 1px purple,inset 0px 0px 2px 1px purple;
  }
  100% {
      box-shadow: 0px 0px 0px 2px purple,inset 0px 0px 0px 2px purple, 0px 0px 20px 4px purple,inset 0px 0px 20px 4px purple;
  }
}