Display an image with rounded corners or in a circle by using the border-radius property.

Here’s the html and css for rounded corners:

rounded corners

<div class="sample-box">
   <img src="sample.png" alt="Author photo">
   <p class="sample-text">Sample</p>
</div>

The rule-set that provides the rounded corners is:

.sample-box img {
    height: 100px;
    width: 100px;
    border-radius: 10%;
    float: left;
}

Increasing the border-radius to 50% displays the image as a circle as show next.

round image

.sample-box img {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    float: left;
}