confusion while using border-radius in anchored image

Question

So I anchored a img tag with itself's link and then I coded the following code in css

a{
      border-color: white;
      border-width: 2px;
      border-radius: 50%;
      border-style: solid; 
  }

and the result was weird as the borders were only in the bottom portion of the image and there were no borders in the upper, right and left portion. Also there was a small white oval near the upper-left corner of the image while if I code the same while using the image tag i.e.

img{
      border-color: white;
      border-width: 2px;
      border-radius: 50%;
      border-style: solid; 
  }

everything is perfect and the borders were perfect by the way this is the html img code

<a href="a45.jpg">

                <img width= 800px src="a45.jpg" alt="alternative for image" >

        </a>

I am no pro at code so please explain in easiest way possible enter image description here

to start with you need to get rid of `center` tag which is obsolete https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center — Temani Afif, May 24 '19 at 12:43
first duplicate will explain the dimension issue, second one the overflow, third one the space in the bottom when adding border to a — Temani Afif, May 24 '19 at 12:54

score -1 · Answer 1 · answered May 24 '19 at 12:48

-1

As stated in the comments, remove the center tag, also

.a <- this referrences the classname a

you probably want to select all anchor-elements

a{

}

same for img, remove the dot

answered May 24 '19 at 12:48

john Smith

17,409
11
76
117

I removed . actually that was by mistake while writing this question as i just added classes in the css there was no '.' in the code also the center was added just to center the image and still i tried removing the center tag but still their are no borders while bordering the a tag – Tushar Sharma May 24 '19 at 12:58

confusion while using border-radius in anchored image

1 Answers1