Michael Gunner

Michael Gunner

© 2014 Michael Gunner. All rights reserved.

Use CSS to make any image circular

Instead of having to edit every image using Photoshop, this handy CSS snippet can make any image appear circular. It uses border-radius (minus prefixes) so the usual browser support there. You can control what part of the image shows using absolute positioning.

But wait! You cry, why not just apply border-radius directly to the image? Because that will only work on perfectly square images. If the image is not square, no matter what you do with the border-radius, you’ll never get a circular image. This method works with any image, of any size, of any aspect ratio.

The trick is to control the width of the image using the inline “width” HTML syntax. This means any image can fit inside the overlay without stretching. Need different sizes? Just create different sized overlays in your CSS.

I only rustled this up in a few minutes just to see if I could do it. Know a better way? Comment below.

See code →

Original Image →

3 Comments

  1. Michael Gunner

    Well no, it uses border-radius which only IE9 supports. If you want earlier IE support, use Modernizr in combination with a polyfill, such as CSS3 pie.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">