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.
3 Comments
servwebucket
not for internet explorer…
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.
Crie imagens arredondadas com CSS3 | Front End Brasil
[...] o Photoshop cada vez de criar uma imagem arredondada que o Designer e Front end Michel Gunner criou esse snippet usando apenas border-radius do CSS3, ele cria uma camada com posição absoluta que sobrepõem a [...]