Recently I got round to sorting out the presentation of comments on this blog. Once I’d decided how I wanted it to look it wasn’t too difficult to implement. The only bit that took a bit of time was working out what was the best approach to take for creating round avatars.

Until CSS3 and the border-radius property came around the only reliable way to use rounded images on the web was to manually create them and use the pre rounded images on your site. Obviously this wasn’t going to work with people’s avatars because I’d have to create a rounded version of the avatar of each person that leaves a comment.

Luckily border-radius has pretty solid support form the browsers, so much so that you no long need to use the browser prefix (-moz, -webkit) with it.

My first attempt was to use an image as a background-image and then round that.

#test1 {
	background: url('blank_avatar_male.jpg');
	height: 60px; width: 60px;
	border-radius: 30px;
}

The key to getting a circle is to set the border-radius property to be half of the height and width (which must be the same). Alternatively you could just set it to 50%.
Unfortunately when you do it like this you don’t have control over the size of the image. Meaning that if it is bigger than the containing element not all of it will be displayed. Although if the element is the same size as the original image then it does work pretty well.

After that failed attempt I decided to just add rounded corners to a img element. That worked much better because it gives you the ability to set the width and height of the image so you don’t suffer from the issues above. So now that I had images rounding nicely I thought I’d jazz it up a little bit by adding a border or 2 and a slight box-shadow.
The HTML mark up looked like this

<a class="avatar">
	<img src="blank_avatar_male.jpg" alt="" />
</a>

and the CSS like this

.avatar {
	border: 1px solid white;
	border-radius: 45px;
	box-shadow: 1px 1px 1px rgba(0,0,0, 0.7);
	display: block;
	height: 90px;
	width: 90px;	
}
		
.avatar img {
	border: 5px solid rgba(0, 0, 0, 0.2);
	border-radius: 45px; /* must be width + border */
	width: 80px;
	height: 80px;
}

Here is the outcome. Looking good isn’t it? Well it should be but if you are using a Webkit browser — Safari or Chrome — it doesn’t quite work.
The reason why it doesn’t work in Webkit browsers is that they don’t like it when you apply a border and a border-radius to an <img> tag. The border-radius gets applied to the border and not the image.

To sort this rendering issue we need to remove the border from the img tag. Doing this along with adding a background colour to the parent element allows us to achieve the same effect in both Mozilla and Webkit browsers. The CSS should now read

.avatar {
	border: 1px solid white;
	height: 90px;
	width: 90px;
	display: block;
	border-radius: 45px;
	box-shadow: 1px 1px 1px rgba(0,0,0, 0.7);
}
		
.avatar {
	background: rgba(0, 0, 0, 0.2);
}
		
.avatar img {
	border-radius: 40px;
	width: 80px;
	height: 80px;
	margin: 6px; /* centers the image in the parent element */
}

With the result looking like this

There are many places where this technique could be used, for example it is now employed in the comments section of this blog. Why don’t you have a play with it and let me know about the cool stuff you make with it.