Perform Animation on CSS border-bottom-color property

To implement animation on the border-bottom-color property with CSS, you can try to run the following code 


Live Demo

<!DOCTYPE html>
   div {
      width: 500px;
      height: 400px;
      background: yellow;
      border: 10px solid yellow;
      background-image: url('');
      animation: myanim 3s infinite;
      background-position: bottom left;
      background-size: 50px;
   @keyframes myanim {
      20% {
         background-color: maroon;
         background-position: bottom right;
         background-size: 90px;
         border-bottom-color: green;
<h2>Performing Animation for bottom border color</h2>
Samual Sam
Samual Sam

Learning faster. Every day.