手軽にやるならCSS3のborder-radiusはどうでしょう。「css 角丸」などでググればいろいろあります。
質問のリンク先はdiv要素の入れ子で、親divのbackground-imageにhttp://www.twofishillustration.com/portfolio2_images/circles.png。
子divのbackground-imageに子供の画像になっています。
demo: http://jsfiddle.net/cherenkov/xUvW8/
<html> <head> <style> #icontents { border-radius: 10px; /* CSS3草案 */ -webkit-border-radius: 10px; /* Safari,Google Chrome用 */ -moz-border-radius: 10px; /* Firefox用 */ } </style> </head> <body> <div id="icontents" style="width:100px; height:100px; overflow:hidden;"> <iframe src="layer1.html"></iframe> </div> </body>
mask-box-imageプロパティを使ってみてください。
文字・画像にマスクをかける(1)
http://cssoboegaki.netkatuyou.com/css3/1465/