CSS circular image

Hi,

I'm John (aka @codingdudecom http://www.coding-dude.com/) and I'm working on a guide on how to do circle images with CSS (presenting an image in a circular shape)

I know that there is no one good solution that fits all cases, so I am trying to cover all possibilities.

So far, I've document 3 main methods with some variations detailed here http://www.coding-dude.com/wp/css/css-circle-image/

Method #1 – Wrapping the image in another element that has a border-radius of 50%

Method #2 – Using an element and setting the image as the background. Then applying the border-radius to this element

Method #3 – Using clip-path to clip the image element to a circle.

I've also taken into consideration the needs for responsive design.

Any other methods you can think of?

I would really appreciate other ideas on this topic.

thanks,
John