Circular images are all the rage on the world wide web at the moment. Here’s how you do it.
First – It’s not essential, but this will work much better with images that are already square-shaped, so maybe do that. Nothing will fall into tiny little microscopic pieces of failure if you don’t though.
Second – the HTML.
<div class="img-circular"><img src="duck.jpg" alt="duck" /></div>
Yes, we COULD just use a single DIV and set its background image, to cut down on a bit of HTML, but if you’re pulling your images from a database, and chances are you might be – this method will cause you much less trouble!
Third (and last, actually) – the CSS.