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="">

<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);
<div class="d-flex m-3">
    <div class="img-wrapper">
        <div class="img-container">
        	<img src=""/>


ALSO READ  Design a Attractive Custom 404 Page

Comments are closed.