Make circular images using CSS

Circular images are all the rage at the moment - for ages all images on the web had boring ninety-degree corners unless you edited the image directly to have transparent edges. However, with CSS this is no longer the case! You can make any image circular using only CSS: the key is to use the border-radius property. Browsers without border-radius fall back to a standard-sized image.

Set the border-radius property of the image to 50% - this tells the browser that the curved corner that border-radius creates should take up half of the image's dimensions; when this is applied to all four corners of the image, you get a complete circle.

Usage

Add a square image to the page:

<img src="http://placekitten.com/g/300/300" class="circle">

Add border-radius to the image; the radius should be half the height or width.

.circle {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}

You can add an outline to the image using box-shadow:

.outline {
  /* horizontal length, vertical length, blur, spread, colour */
  -webkit-box-shadow: 0 0 0 7px #d90a1a;
  -moz-box-shadow: 0 0 0 7px #d90a1a;
  -o-box-shadow: 0 0 0 7px #d90a1a;
  box-shadow: 0 0 0 7px #d90a1a;
}

The box-shadow should have no horizontal or vertical height and have zero blur radius to get a sharp outline. The spread parameter gives an even distribution of colour around the image.

Examples

Circle

Outline