htmlcss

I use border-radius for round my image element but it's not completely rounded

sorry for my English...

look at below code

 img {
    max-width: 100%;
 }
 #avatar-img {
    border-radius: 50%;
    display: block;
 }

This is output. It is not completely rounded

enter image description here

Now my question is how to round this image? what's wrong with this code?

Solution

  • You use for border-radius a percentage value, but the height and the widht of your image are not the same. It is logical that a percentage of two values which are not the same give you different results, therefore it isn't round.

    If you want to make it round use an image where width and height are the same. You can set width and height to the same value