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.

.img-circular {
     width: 417px;
     height: 417px;
     border-radius: 50%;
     overflow: hidden;
}

Awesome.