We’ve done a glowing fireplace, but what about a continuous rim of fire wrapped entirely around a div? We can achieve this by animating the outer box-shadow spread values to mimic wild inferno licking at the air.

The Fire Border Matrix

.flame-box {
  background: black;
  border: 2px solid #ea580c;
  border-radius: 10px;
  animation: inferno 0.1s infinite alternate;
}

@keyframes inferno {
  0% { 
    box-shadow: 
      0 -5px 15px #f97316, 
      0px -10px 20px #ef4444, 
      0px -20px 30px #7f1d1d; 
  }
  100% { 
    box-shadow: 
      0 -8px 20px #f97316, 
      2px -15px 25px #ef4444, 
      -2px -25px 40px #7f1d1d; 
  }
}

Witness the blazing, completely image-free fire border burning infinitely within the Live Demo!