<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.