Rounded corners on rectangular image using CSS only

Question

I'd like to create a round image from a rectangular image using radius-border.

Is there simple way to achieve this with CSS without distorting the image AND ensuring a circle is perfectly round.

See failed attempts here:

http://jsfiddle.net/v8g3y0na/

.rounded-corners-2{     border-radius: 100px;     height: 150px;     width: 150px; 

Can this be done in only CSS.....?

Answer 1

You do that by adding a parent div to your img and the code flows as follows

figure{     width:150px;     height:150px;     border-radius:50%;     overflow:hidden; } 

Updated Demo