Best way to mask an image in HTML5

you could use

• the old fashioned way - by using a transparent png on top of the desired element
• the css3 border-radius of the image set to half of it's dimensions (so that the border defines a circle)
• the css3 mask and mask-clip properties (here's a nice demo : http://www.webkit.org/blog/181/css-masks/)
• canvas to do the masking
• svg circles with the image as background-pattern

The choice depends on the targeted browsers and the time you want to invest.
For a fully cross-browser result, I recommend the old fashioned way, but if you want more shapes (maybe dynamic ones) or more than just image masking, you could try svg or canvas.

  -circle {
        -webkit-border-radius: 61px;
        -moz-border-radius: 61px;
        border-radius: 61px;
        border:1px solid #aaaaaa;
        width:122px;
        height:122px;
   }

see this

check this http://jsfiddle.net/WQSLa/1/

EDIT

u can also try this http://jsfiddle.net/jalbertbowdenii/WQSLa/3 as suggested by albert