Rotating Border Animation using CSS

In this tutorial, we are going to create a rotating border animation using CSS.

In the following example, we have set a rotating border to a an image element using CSS animation property. We have used position property, ::before selector,  animation property and CSS keyframes for this purpose.

Follow this video for complete guidance :

Full Source Code :

       
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.2/css/bootstrap.min.css">

<style type="text/css">

  .img-wrapper {
      position: relative;
  }
  .img-container {
      width: 100px;
      height: 100px;
      -o-object-fit: cover;
      object-fit: cover;
      background-repeat: no-repeat;
      background-size: cover;
      overflow: hidden;
      border-radius: 50%;
  }
  .img-container img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      vertical-align: middle;
  }
  .img-wrapper:after {
      content: "";
      border: 1px dashed red;
      padding: 2px;
      border-radius: 50%;
      display: inline-block;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      -webkit-animation: border 10s linear infinite;
      animation: border 10s linear infinite;
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
  }
  @-webkit-keyframes border {
  		0% {
    		-webkit-transform: rotate(0deg) scale(1.1);
            transform: rotate(0deg) scale(1.1);
  		}
    100% {
      -webkit-transform: rotate(360deg) scale(1.1);
            transform: rotate(360deg) scale(1.1);
  		}
  }
  
</style>
        
<div class="d-flex m-3">
    <div class="img-wrapper">
        <div class="img-container">
        	<img src="https://upload.wikimedia.org/wikipedia/commons/3/34/Elon_Musk_Royal_Society_%28crop2%29.jpg"/>
        </div>
    </div>
</div>