<div class="circle-block"></div>
<p>&nbsp;</p>
<div class="circle-block_three"></div>
<p>&nbsp;</p>
<svg viewBox="0 0 250 250" width="250" height="250">
  <circle class="circle-block_two" cx="125" cy="125" r="120"/>
</svg>
<p>&nbsp;</p>
<div class="circle-block_four"></div>
<p>&nbsp;</p>
<div class="circle-block_five"><img src="https://picsum.photos/id/15/1920/1080" /></div>
div, p {display: inline-block;}
.circle-block {
    background: #ffef68;
    border: 5px solid #3766ef;
    border-radius: 50%;
    height: 250px;
    width: 250px;
}
.circle-block_two {
    fill: #ffef68;
    stroke: #3766ef;
    stroke-width: 10px;
}
.circle-block_three {
    background: #ffef68;
    clip-path: circle(50%);
    height: 250px;
    width: 250px;
}
.circle-block_four {
    background-image: radial-gradient(circle, #ffef68, #ffef68 70%, transparent 60%);
    height: 250px;
    width: 250px;
}
.circle-block_five img {
    border-radius: 50%;
    object-fit: cover;
    height: 250px;
    width: 250px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.