How to make rounded images with CSS?

[webangel Participant Total posts: 6 Likes: 1]

Is it still a good practice to create rounded photos manually in photoshop?

[admin Keymaster Total posts: 11]

CSS3 introduced border-radius property which is leting you to convert square images into rounded ones on the fly. It works pretty much with every modern browser. In this case there is no reason to pre-process images if CSS 3 can help. Especially if we are dealing with images that are uploaded by regular users who may not be familiar with a software like photoshop.

Working example:

CSS:

.circle {
    border-radius: 50%;
}

HTML:
<img class="circle" src="myfile.jpg">

Keep in mind that in order to have photos perfectly round, you need to use images with the same width and height. Otherwise they will turn into ellipses.

More info: http://www.w3schools.com/cssref/css3_pr_border-radius.asp

[Author]

Posts