Using an <img> tag:

Use border-radius: 50%. The size of the source image will determine the size of the circle.

HTML:

1
<img class="circular-img" src="http://placehold.it/150x150" />

CSS:

1
2
3
.circular-img {
border-radius: 50%;
}

Result:

Using a <div> with a background image:

The idea is the same, but you will need to specify the size of the image in the CSS and add a few background CSS directives.

HTML:

1
<div class="circular-div default-image-background"></div>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.circular-img {
border-radius: 50%;
}

.circular-div {
border-radius: 50%;
/* No repeat for the background image */
background-repeat: no-repeat;
/* Center the image in the circle */
background-position: center center;
/* Scale the image correctly */
background-size: cover;
}

.default-image-background {
background-image: url('http://placehold.it/150x150');
/* Specify the circle dimension */
height: 150px;
width: 150px;
}

Result: