How do you make an <a> element circular?

Issue

I have an <a> element that contains an <img>. The image is circular, and I want the link to be circular as well. I've tried:

<a href="https://example.com/path/to/file.txt" style="display: block; border-radius: 50%;">
    <img src="image.png">
</a>

...but the link is still square, and it can be clickable outside of the circle it's supposed to be clickable in.

Is there any way to properly use border-radius with an <a> element?

Solution

Add border-radius to both the image and the a tag.

a, img {
  border-radius: 50%;
}

<a href="#">
    <img src="https://i.picsum.photos/id/180/200/200.jpg?hmac=YtJJ-CeQThqv_K6NzUnKS6Q8-tjxUVkSKeDsStrjEyM">
</a>

Answered By - Rickard Elimää