0

I am trying to make circular borders for profile pictures however I can't get the CSS to work. My CSS and HTML code is shown below

.author-image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
<div class="author-info">
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Avatar&w=150&h=150" class="author-image">
</div>

when I try this on jsfiddle I only get a square area instead of a circle. What I'm I missing here?

Omar Ali
  • 8,467
  • 4
  • 33
  • 58
Caleb Oki
  • 667
  • 2
  • 11
  • 29

2 Answers2

0

You don't have an image in the src. In most browsers it would show the "no image found" icon. It worked as soon as I added one.

<div class="author-info">
  <img src="http://combiboilersleeds.com/images/image/image-3.jpg" class="author-image">
</div>

.author-image {
  border-radius: 50%;
  height: 50px;
  width: 50px;
}
Joshua
  • 648
  • 7
  • 18
  • 2
    He is providing an example, don't take it in a literal manner – Mr. Alien Jan 20 '17 at 08:18
  • An example of something that is of obvious cause? I don't understand your point. – Joshua Jan 20 '17 at 08:19
  • @Mr.Alien It could have been an example, but as it turns out, it was the real problem ... – vals Jan 20 '17 at 08:46
  • @vals I still don't get what he was trying to do.. He said *when I try this on jsfiddle I only get a square area instead of a circle* so I have no idea how did he saw a square without any image – Mr. Alien Jan 20 '17 at 09:10
0

It is the "border" that covers empty images that is causing the problem. By giving your image a background color for example (or a valid image path; as you have done), you can see that the border rounding is working ok.

.author-image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color:#555;
}
<div class="author-info">
  <img src="" class="author-image">
</div>
ne1410s
  • 6,864
  • 6
  • 55
  • 61
  • This goes to prove that the image element is being styled, but the container for no image error stays square. – Joshua Jan 20 '17 at 08:56