As a front-end developer, you might've already came across to a web design that includes user profiles pages with a round profile picture or some other image that has a circular shape.
Lately, many UI designers are using round profile pictures in their designs. There's an actual question on Quora discussing this designer's approach of displaying user's profile pictures.
So if the design has some sort of an element like this one below:
We can achieve this result with a transparent image and the actual photo beneath it. This would look like this:
See the Pen Rounded avatar by Ivanka Todorova (@FakeHeal) on CodePen.
The disadvantages of this approach are:
- Mask's background should be the same color as the background of the element (otherwise it will look bad, take a look at the second div in the codepen)
- The image should be as big as the mask.
Hopefully, CSS3 comes with a helpful property
border-radius that is supported by a wide range of contemporary browsers. (Info: caniuse.com)
This way we are not going to need any images except the actual user photo. Refer to the codepen below:
See the Pen Rounded avatar without an image (css3 border-radius) by Ivanka Todorova (@FakeHeal) on CodePen.
The second way, ofcourse, is more elegant and cool.
I should mention that some time ago I met a problem with Safari (under OSX) and the
border-radius property. My problem was solved in StackOverflow. So if you want to support Safari 6.1 and below, you should checkout the answer.