Originally when I CSSed the round avatars on the DesignSwap comments area, I used the -webkit-mask-image property. I was really proud of how neat and effective this was until I realized you could apply border-radius to an image directly. To achieve a round avatar with a 2px beige border, I applied the following CSS to an avatar loading within a div class called avatar-frame.

.avatar-frame{border: 2px solid #c7b89e;}
.avatar-frame,.avatar-frame img{
	width: 50px;
	height: 50px;
	-webkit-border-radius: 30px; /* Saf3+, Chrome */
	border-radius: 30px; /* Opera 10.5, IE 9 */
	/*-moz-border-radius: 30px;  Disabled for FF1+ */
	}

I love this solution. It yields rounded avatars with no additional images or scripts loading, just an extra line of code. The -moz prefix is disabled here because Firefox doesn’t support this, though they really should. CSS for -moz-border-radius of course works for the div, but not the img. On the bright side, it degrades quite nicely into a square avatar with a 2px border.

Opera is another matter altogether. Because it utilizes the general ‘border-radius’ CSS and doesn’t apply it to an img, Opera displays a square image with a rounded border. I’d say this is a great example of where browser-specific prefixes come in handy. It’d be nice to disable this for Opera until it works.