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>