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.


Add a square image to the page:

<img src="" 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.