CodePen Embed - animated border (circle)

<html>
  <head></head>
  <body>
  
    <div class="container">
          <div class="image-circle">
            <img src="http://placehold.it/100x100" />
        </div>
    </div>

  
  
  </body>
</<html>

    .container {
        padding: 100px;
    }

    .image-circle {
        width: 132px;
        height: 132px;
        border-radius: 50%;
        border-top: 2px dashed #ffcc00;
        border-right: 2px dashed #ffcc00;
        border-left: 2px dashed #000000;
        border-bottom: 2px dashed #000000;
        padding: 10px;
        animation: spin 10s infinite linear;
    }
    .image-circle img {
        animation: spin 10s infinite reverse linear;
        width: 100%;
        border-radius: 50%;
    }



    @keyframes spin {
        100% {
            transform: rotate(1turn);
        }
    }

This Pen is owned by AbdelRahman Wahdan on CodePen.

See more by @abdelrahmanahmed on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.