Introduction

In this brief snippet we will show you how to make your images circular using HTML5 and CSS3. We will accomplish this by using border-radius. CSS3 border radius is used to round the corners of an element. It is currently supported by all recent major browsers, with only IE8 not supporting it.

To make an image round, simply use the code listed below, modifying it for your needs.

HTML:

<img src="my-image.jpg" alt="my-image" class="circular-image" />
CSS:

.circular-image {
  border-radius:  50%;
}

An example image is below that uses this method.

Original Image:
image of eagle
Circular Image:
image of eagle


Note that due to a bug in Safari 6.1 (included with OSX 10.7 "Lion") the images above will not be completely circular. Newer versions of Safari work as intended. To fix the bug for Safari 6.1 users, you can simply wrap the image in a parent container and apply border-radius to both the image and it's parent container. For details on fixing this issue in Safari 6.1, see this stack overflow link.

Resources

That's it! Thanks for reading!