Easy circular images with CSS!

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.

[sourcecode language=”html”]
<div class="img-circular"><img src="duck.jpg" alt="duck" /></div>
[/sourcecode]

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.

[sourcecode language=”css”]
.img-circular {
width: 417px;
height: 417px;
border-radius: 50%;
overflow: hidden;
}
[/sourcecode]

Awesome.

Leave a Reply