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.

8 Comments

  1. Debbie says:

    Hello.
    Thanks for posting your CSS for rounded images.
    I have a few questions I hope you can help me with:

    1. Can you please tell me what “rgba” stands for? With your code below, it says “rgba” is not a valid color value.

    .avatar {
    background: rgba(0, 0, 0, 0.2);

    2. When applying all of the code… it works great in Firefox… but when I “preview” in all other major browsers within Dreamweaver, it still displays a square image inside the circle (like your bad example.) How can I achieve the same appearance in Opera, Chrome, Safari, and IE?

    3. When I do a “browser compatibility check” this code comes up with all sorts of errors. Can these be fixed?

    Unsupported property: border-radius, box-shadow
    Unsupported value: ‘rgba(0,0,0,0.2)’

    Affects: Firefox 1.5, 2.0, 3.0; Internet Explorer 6.0, 7.0, 8.0b1; Internet Explorer for Macintosh 5.2; Opera 8.0, 9.0; Safari 2.0, 3.0

    4. You say to set the margin at 6px to center the image inside the circle… why are you using 6px as your size? What is that number determined by? Will that be the same margin setting to use even if you don’t use a circle as your targeted shape, but rather a rectangle with rounded corners?

    margin: 6px; /* centers the image in the parent element */

    Your help will be GREATLY appreciated!! I’ve been trying to apply a good CSS code for rounded edges on images (not div tags) … which also includes a border outline.

    I’ve tried another code different from yours, but it too only works with Firefox. (Putting ‘img’ before border-radius…)

    img border-radius: 45px;

    Thanks!
    D. Filz

    P.S. – I like your teeny tiny smiley face in the bottom left corner.

  2. Debbie says:

    Oops!
    Forgot to add a very important element… the <a> span from the beginning of the code.

    Now it works great in ALL the browsers I’m previewing… except for Opera 11.5. (and possibly IE – I don’t have IE to check… using a Mac.)

    I don’t know why it’s not working… because the ‘border-radius: 45px’ should apply to Opera 10.5+ and IE 6+… correct? Is there a way to make your code work in Opera and IE?

    Also… will I need to add the browser prefixes (-moz, -webkit, etc.) for it to work in older versions of Firefox, Safari, and Chrome?

    Thank you for your help!
    - D. Filz

  3. Debbie Filz says:

    Hello.
    Could you please help me?

    I had applied the info you presented above for rounded corners using CSS, and it looks great in all browsers except Opera 11.5 on my Mac.

    I noticed that it WILL work in Opera if the image you are using is contained in the “background” of a div, but will NOT work if you insert the image directly on the page, and apply the CSS to the image… (which is what I want to do.)

    Do you know a work-around for this?
    I would greatly appreciate your assistance.
    Thanks!

    - D. Filz

  4. Colm says:

    Hi Debbie, sorry for the late response I’ve been away. Lets see if I can answer some of you questions.
    1. rgba stands for red, green, blue, alpha (opacity between 0-1). Wikipedia’s article on this is useful.

    3. It’ll probably be to do with these CSS properties only being partially supported by the browsers and because they are CSS3 properties which are still in draft mode so can be considered unstable but are in reality usable.
    4. The reason I use a margin of 6px is because the image has a width of 80px and it’s container has a width of 90px plus a 1px border on each side. Therefore the sum was: ( 90px + 1px + 1px) – 80px = 12px, 12px / 2 = 6px

    Hope that helps!

  5. Colm says:

    There does indeed seem to be an issue in Opera when applying a border-radius to an <img> tag. As far as I can see this is rendering bug in Opera because the image gets applied after and above the border which should clip it. Lets hope they fix it soon :)

    In the meantime you can attempt a number of not 100% guaranteed work arounds depending on your use case. For example these guys use a thick border of the same colour as the background to draw over the edges of the image. Which is useful if you are using block colour backgrounds.

    Alternatively, as you mention you can use the background-image property. One of the reasons I used to not favour this method was because you have less control over the size of the image. That is not quite true. You can use the background-size property in conjunction with the background-repeat and background-position properties. Resulting on CSS similar to:

    .avatar-wrap {
    background-image: url(/image/avatar.png);
    background-size: 30px 30px;
    background-repeat: no-repeat;
    background-position: center;
    }

    That should achieve a similar effect until Opera changes the way they implement broder-radius to match everyone else’s approach.
    Thanks for pointing it out though — looks like I have a tweak to make to this blog!

  6. Rich McNabb says:

    I have been researching how to fix Opera’s border-radius overflow issue and the only “solution” I have found is to use the CSS “background-image” property.

    This doesn’t seem like the best approach in the case of a CMS with image uploads you would have to include an inline style on the templates

    .photo {
    background: url($MainPhotoImage.MainPhoto.URL);
    }

  7. T.Manikandan says:

    Thank you very much for the code. But It’s not working perfectly in Safari Browser.

    Thanks
    T.Manikandan

  8. Debasis says:

    Thank u so muchhhh……………………

Leave a comment

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

*