How to make a circular image in css

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; 
}

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/

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"/>

This work for me

clip-path: circle();