<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.