One interesting thing I tried was anchoring an img tag with its own link and then styling it using the following CSS code:
a{
border-color: white;
border-width: 2px;
border-radius: 50%;
border-style: solid;
}
The result was quite unexpected as the borders only appeared at the bottom of the image, leaving the upper, right, and left portions without any borders. Additionally, there was a small white oval near the upper-left corner of the image. However, when I applied the same styling to just the image tag like this:
img{
border-color: white;
border-width: 2px;
border-radius: 50%;
border-style: solid;
}
everything looked perfect and the borders were uniform across all sides.
By the way, here is the HTML code for the image:
<a href="a45.jpg">
<img width= 800px src="a45.jpg" alt="alternative for image" >
</a>
I'm no coding expert, so please explain in simple terms if possible.
View the original image here