How to make rounded images with CSS

Ever since the introduction of border-radius, the web has gotten a lot less square. Did you know you can use this property to make images completely round?

It's actually dead simple. Just throw this into your stylesheet:

.img-circle {
    border-radius: 50%;
}

Now any image with the img-circle class will be displayed as a perfect circle:

<img class="img-circle" src="kitten.jpg">

This is the exact same trick that Bootstrap uses for rounded images, but you don't need an entire framework just to achieve this simple effect:

Rounded image

It's worth mentioning that if you want to keep things perfectly round, use an image with the same width and height. Anything else will still be rounded, but you'll end up with an elliptic shape which may or may not be desirable

This works in pretty much every modern browser out there, but your IE8 users will still see square images. (Don't worry, if they're still using IE8 they're used to blocky things anyway.)

Love these images? Use them free in your projects via placekitten.

Author avatar

About the author

New Hampshirite building web apps in Florida. Creator of Surreal CMS, Postleaf, and DirtyMarkup.

Need to get in touch? Catch me on Twitter.