

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

My initial guess would be Jscript. Although it could also be done using a transparent image over the users picture
======
nirmal
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.

------
jmtulloss
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.

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

------
mcav
<http://static.ak.fbcdn.net/images/ui/UIRoundedImage.png>

They overlay that image on top.

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

------
mindhacker
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".

