Ask YC: How does facebook round corners on users' pictures?

https://news.ycombinator.com/item?id=584159

by ashishk • 17 years ago

18 6 17 years ago

news.ycombinator.com

My initial guess would be Jscript. Although it could also be done using a transparent image over the users picture

nirmal2• 17 years ago

They use the CSS Sprite technique to overlay a certain portion of this image http://static.ak.fbcdn.net/images/ui/UIRoundedImage.png on top of your picture. It's hard to see in the browser but above the blue rounded corner mask there is a white corner mask.

mcav• 17 years ago

http://static.ak.fbcdn.net/images/ui/UIRoundedImage.png

They overlay that image on top.

jmtulloss• 17 years ago

As you can see, this question has been answered, but in the future you should consider using Firebug (http://getfirebug.com/). With firebug, you can inspect any element on a web page and see exactly how things are done. I've learned all sorts of tricks this way.

nirmal2• 17 years ago

And if you're a Safari user, you can just right-click on something and choose "Inspect Element".

mindhacker• 17 years ago

The question has been answered already but if you'd like to see it for yourself, you can right click on the image and hit "View Background Image".

talleyrand• 17 years ago

Here's a good tutorial on the technique: http://cssglobe.com/post/3714/css-sprites-rounded-corners/

Ask YC: How does facebook round corners on users' pictures?

Related Stories