<div class="container">
  <img 
       class="content"
       src="https://pbs.twimg.com/profile_images/1254684051212034050/i4Y8X9J4_400x400.jpg">
</div>
.container{
  /* Set the size of the container */
  --size: 100px;
  
  /* Center the container's content */
  display: grid;
  place-items: center;
  
  /* Make the container round */
  border-radius: 50%;
  width: var(--size);
  height: var(--size);
  
  /* Add the gradient */
  background: linear-gradient(purple, blue, purple);
}
.content{
  /* Leave 10% of the parent to act as borders */
  width: 90%;
  height: 90%;
  
  /* Use the same border-radius as the parent */
  border-radius: inherit;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.