border-radius property of CSS 3 is the magic which made internet less squared. This property can be applied to any element to give it rounded corners. Yet, in practice the border-radius is most used on images to make them full rounded.
All you need to do in order to give a image a round appearance is apply the border-radius property with a value equals to 50%:
It is obviously, but I will mention anyway, to obtain a perfectly round image you must have am image with equal height an width – otherwise you will end up with an elliptic image.
My prefer style for a round image is as follow:
border: 1px solid red;
opacity: 0.4; /* 40% transparency */
filter: alpha(opacity=40); /* same, but for IE */
The image is defined as:
<img src="img-name.jpg" alt="" class="round-img" />
And it looks like the following:
Check here the list of browsers in which the border-radius property works.