How to make a circular image in css

Question

I\'m very new to this sort of thing but this is my issue. I\'ve looked through a couple of questions and it makes sense with how to make it circular but the image which is m

Answer 1

Your css rule needs a . (if it applied with a class) or # (if it is applied with an id) at the start.

Also if you apply the rule to a container of the image you need to set the image to re-size accordingly to fit the circle;

Finally, 50% radius is all you need for a circle.

.circular_image {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  background-color: blue;
  /* commented for demo
  float: left;
  margin-left: 125px;
  margin-top: 20px;
  */
  
  /*for demo*/
  display:inline-block;
  vertical-align:middle;
}
.circular_image img{
  width:100%;
}

with container

<div class="circular_image">
  <img src="http://placekitten.com/500/500"/>
</div>

<br><br>
directly on image

<img class="circular_image" src="http://placekitten.com/g/500/500"/>

Answer 2

Just add the border-radius:50%; to circular_imageClass.

Below the neet code is....

.circular_image{
    float:left;
    margin-left:125px;
    margin-top: 20px;
    width: 200px;
    height: 200px;
    border-radius: 50%; /* Modified*/
    /*overflow:hidden;*/
    background-color: blue; 
}

Answer 3

You have to set the border-radius to the img itself, not to the containing div. As you know images are square or rectangular and putting them inside something circle will of course cut off the boundaries.

img { 
    border-radius: 50%; 
    width: 100px;
    height: 100px;
}

Here is the fiddle: http://jsfiddle.net/LLo1u3Ld/2/