Make any image circular using only CSS; the key is to use border-radius. Browsers without border-radius fall back to a standard-sized image.

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