How to create a circle div around an image in CSS?-CodePudding

I am designing a logo in CSS where a circle is surrounding a transparent png image.

<img id="desired" src="https://via.placeholder.com/550">

img#desired {
  width: 10%;
  background-color: red;
  border-radius: 80px;
  display: block;
}

This successfully creates what I want it to look like. However, a requirement is that a surrounding div is what is creating the circle, not the image.

This is what i have so far:

<div>
  <img id="actual" src="https://via.placeholder.com/550">
</div>

div {
  background-color: red;
  border-radius: 80px;
  display: inline-block;
  padding: 20px;
}
#actual {
  display: block;
  width: 20%;
}

but this creates:

How can I fix my second implementation to look like the first one?

Here is the fiddle: https://jsfiddle.net/qf26Lhe0/

CodePudding user response：

I've added two more methods. The method you want, you can use background-color instead of setting a border.

img {
  border: 50px solid red;
  border-radius: 100%;
}

.background {
  background: url('https://picsum.photos/500') center/cover no-repeat;
  width: 500px;
  height: 500px;
  border: 50px solid red;
  border-radius: 100%;
}

/* THE METHOD YOU WANT */
.img-container {
  width: fit-content;
  height: fit-content;
  background-color: red;
  border-radius: 100%;
}

<img src="https://picsum.photos/500" width="500" height="500" />

<div ></div>

<!-- THE METHOD YOU WANT -->
<div >
  <img src="https://picsum.photos/500" width="500" height="500" />
</div>