How to make rounded images - html

Question

I want to make rounded images like this I have searched and googled but I did not find any solutions to make image rounded.I can do images rounded border like this but I dont know how to make the image itself rounded.Please help

Answer 1

Try this, Change radius by adjusting height and width. height and width should be equal and double of the radius you required
HTML :
<div id="round">
</div>
CSS :
#round{
height:100px;
width:100px;
border-radius:50%;
background:green;
overflow:hidden;
}
Fiddle Demo / updated
Check this for responsive circle DEMO

Answer 2

Use border-radius to achieve what you are looking for.
WORKING DEMO
The code:
img{border-radius:50%;}

Answer 3

If you specifically want a white box with a rounded image in it, you simply make a div with the said width & height you want.
Give it a background color and a border of 1px in the same background color.
Then in the div place an image with borderradius of 50% and width and height of 100% to fill the box and you're done.
Try this: http://jsfiddle.net/fWwgD/
<style type="text/css">
body
{
background-color:black;
}
#box
{
width:300px;
height:300px;
background-color:white;
border: 1px solid white;
}
.circle
{
border-radius:50%;
width:100%;
height:100%;
}
</style>
<div id="box">
<img src="https://www.gravatar.com/avatar/01f40d1a1219433e2f7ab40fab531142?s=32&d=identicon&r=PG&f=1" class="circle">
</div>