Round Images in CSS

#HTML5 #CSS3

Using an <img> tag:

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

HTML:

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

CSS:

.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:

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

CSS:

.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:

#HTML5 #CSS3