How to Create Rounded Images with CSS

Posted by Lasantha Bandara on August 12th, 2016 File Under : css, image0 Comment

Rounded Images with CSS3

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%;
}

Note: 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://www.bloggertipandtrick.net/wp-content/uploads/2016/08/rounded-images-with-css.jpg" />

Result:

File Under : css, image

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.