CSS3 Border-Radius & Rounded Avatars

CSS Rounded Avatars with Border-RadiusOriginally 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.

37 Responses

Leave a comment or contact me via Twitter @TrentWalton

  • Shawn Emory

    Great tip! I never would have thought this is possible with css.

  • Grant

    Nice tip.

  • Skylar Hartman

    Holytrash my face!

  • Justin

    I used border-radius on images just assuming it would work. I never tested it past Chrome/Safari though. Thanks for figuring this all out!

  • BJ

    Hello,

    I love this site..
    Thanks for shearing this with us.

    I also like the site layout a lot..
    I wish i was that creative :)

    BJ

  • rick

    When i made a site for iPhone (Safari brower) i used de Mask CCS 3 propertie (with another image as a mask), only available for Webkit... this solutions is great and easy.
    Thanks for the tip!

  • Dodo

    I played a litle bit with firefox and I found a solution..It‘s not so nice but it works well:

    css code:
    .avatar {
    -moz-border-radius:30px 30px 30px 30px;
    -o-border-radius:30px 30px 30px 30px;
    -webkit-border-radius:30px 30px 30px 30px;
    border-radius:30px 30px 30px 30px;
    border:2px solid black;
    height:34px;
    width:34px;
    display: inline-block; /*optional, if you want to use div as image*/
    }

    html code:

    Basically you just use div instead of image...

  • Dodo

    html code again:

    <div style=‘background:url(PATH_TO_IMAGE)’ class=‘avatar’&gt&lt/div&gt

  • José P. Airosa

    Very interesting tip! Thank you :)

  • Johannes Koggdal

    There is a simple jQuery solution for the Firefox problem. It’s basically what DODO said, but a little more dynamic. The script takes the src path and wraps the image with a span, set its width and height, add a background image with the image path, set the same class the image tag had on the span tag too, and hide the img tag. If you then style the class to be rounded, not the image tag itself, it will work in all modern browsers.

    http://www.webdesignerwall.com/tutorials/css3-rounded-image-with-jquery/

  • Micheil Smith

    What about using one of the clipping options, eg, overflow:hidden to force clipping, I’m not sure if that’d actually work though; It’s just a thought.

  • liz

    Great tip! Thanks for sharing!

  • Trent

    @Dodo: Good thinking... With the DesignSwap site, I opted to keep the markup as simple & clean as possible. Let’s hope Firefox will refine their support for border-radius and images soon.

    @Micheil Smith: Yet another great option. Thank you for sharing... I hadn’t seen that.

    @Johannes Koggdal: That was actually my initial thought:) I used -webkit-mask-image and a round semi-transparent PNG on the avatars to knockout the rounded corners, but switched to border-radius when I realized I could achieve this with no extra scripts or images via CSS.

    Overall, I think I’ll always opt for these simple lightweight CSS3 solutions over scripts or images whenever possible. Pages will load faster and I think it’s good to have examples of unsupported CSS online so that we can point them out and ask for browser improvements & additions.

  • Yaron Schoen

    And I was sure I gave you a curve ball that no one can achieve. Ha! I forgot that Sir Walton can achieve anything!

  • Johannes Koggdal

    @Trent: Definitely, pure CSS is always better. But if you really want rounded corners (made with border-radius) in all modern browsers, a script could be useful. You could also do a server side check for the User-Agent and serve the script only to the browsers you know don’t support border-radius on img yet. User-Agent checks are not the perfect solution, since browsers change, but in this case it’s not that bad. If you still have the script active when Firefox (and Opera) enable border-radius on img it will still work, just one more script to run for those browsers. And if it’s possible you can remove the script at that time.

  • Trent

    @Johannes Koggdal: I couldn’t agree more... And if I were working on a client site where border-radius was front and center, that solution would be a real lifesaver!

  • James

    @Johannes Koggdal I agree too, that’s probably the best method right now. Its a shame that Firefox is getting left behind with CSS3 support lately, I’m seeing so many tutorials for gorgeous CSS3 effects that aren’t particularly useful in the real world yet because they’re only currently visible to about 4% of browsers. If Firefox supported more then it would boost that to more like 34% which at least makes it more worthwhile. Still with methods such as this that degrade gracefully they’re still useful to an extent. I think its in general a good idea to add some non essential CSS3 flair even when it won’t be seen by everyone, but just by webkit users? I suppose it encourages other browsers to pick up the support slack to an extent.

  • Johannes Koggdal

    @James: I agree, we have to push the browser vendors further. I tried the latest beta of Firefox 4 (Minefield 4.0b3pre Mac/64bit) some days ago, and I was surprised CSS issues like this were still not solved. I also sent some feedback to the team about this.

  • James

    I’m trying the FF 4 beta too, there are some great new features and support, but they really need to pull something better out of their hats than that in order to keep up with Chrome and Safari. Especially with the developer features both of those browsers now feature.

  • Katie

    That’s amazing! I can’t wait until HTML5 and CSS3 become standard code.

  • Mikie

    Just to mention chrome no longer needs the -weblog prefix, border-radius is supported in it’s standard syntax!

  • Trent

    I’m glad to see others hoping for better CSS support in Firefox. I wish they’d go webkit.

    @James: I feel the same way about adding bonuses here and there for supporting browsers. On that note, I’m really happy to report that this rounded avatar technique works perfectly in IE9!

  • Kawika

    Thanks so much for this post! It’s amazing what is possible with CSS3, though I’m saddened to see FireFox become the browser that needs “hacks” or is just plain non-supportive of the techniques... Mozilla better start putting the pedal to the metal or they’re gonna be taken over by Chrome.

  • Galen Gidman

    These would work great until you get an avatar (like mine) that does not have a face in the center. But still, it’s a great design element.

  • lwinmemehtun

    Why don’t work in Firefox.

  • Gaurav Sharma

    That was simply awesome. I cannot wait to use it. I am wasting time, gotta try.

    God bless. Keep it coming.

  • Karl Ringrose

    Hi I just figured out a kind of work around for firefox etc. It may not come out as good as the image being round but could always try.

    Just make the rounded div container hide overflow and then the image should comeout with the rounded edges.

    Also, if you could be bothered js coding it you could also check the browser and make firefox opera convert the image to a background image of the container.. just some ideas and thoughts.

    Hope they help.

  • HRJ

    Just for the sake of those who come to this post from Google search, Firefox 4 final does the clip the image correctly with border-radius set.

    Which means only Opera isn’t ready for it. (Checked with Opera version 11.01)

  • Paris Vega

    Would it be easier to use border-radius:50%; .... ?

  • Trent

    Yea, I suppose it would :)

  • Jenny

    Awesome, this is exactly what I was looking for. I’ve always wondered how to do this ’cause I’d seen other sites using it and wanted to do it myself but I didn’t wanna steal their coding. You are god now :P

  • Charlie Crystle

    Thank you--really helped in a pinch! Check out Jawaya.com in the next day or so, with this applied :)

  • Carl Smith

    Found a workaround for this using box shadow:
    box-shadow: 0 0 0 3px rgba(255,255,255,1), 0 0 5px 3px rgba(0,0,0,0.65);

    The first shadow is not offset (0 0), has no blur (0) and a spread of 3px, white at full opacity. This gives a hard 3px white border.

    The second shadow here has no offset (0 0) a blur of 5px, a spread of 3px and is semi-transparent black.

    Adjust to suit.

    Opera still doesn’t play ball though...

  • André Drougge

    Solving the cross browser issues could be done in several ways, haven’t really worked out Opera though. But how about wrapping the avatar in, lets say a div and putting the border-radius declarations on that div, also declaring overflow:hidden;

    This will make the image residing withing the element to be hidden wherever it overflows, which would be the corners.

  • alan

    border-radius ‘now’ works directly on images:

    img {
    border-radius:npx;
    }

  • A

    Doesn’t work on safari, any work around?

  • Trent

    @A: Are you sure about that?

Leave a Reply