How to Create Rounded Images with CSS

Do you want to display circular images on your website? With CSS3, this can be done with in few seconds. You can use CSS border-radius property to make rounded images. Just add below CSS code into your style-sheet.

.img-rounded {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

If you are using Blogger, go to "Edit HTML" and add it just before ]]></b:skin> tag.

Now when you want to make an image circular, just add "img-rounded" CSS class into it. Look at the example below:

<img class="img-rounded" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx-C8Pak0rfJiIZnSgUwKVSFBt0lSIAymb0dZYbXST-EaRn3OGDmmmrMA3r6ADVajM4XKuE_jvjGSIaZxQZhuKqg5D2_4LBhEyQDIrxJv72CbUKl7bFjuESZ7CaNCDNcdC6ynMJK31Ad7h/s320/df50754a21636a29dbd50bff8190e9fe%255B1%255D.jpg" />

Result: