cssで円形マスク

最近css3を使用して画像を切り取らなくても、マスクで画像を切り抜いたりなど、できるようになって来ました。
スマホサイトなどcss3に対応したブラウザなら切り抜くことが可能なので、横並びのレイアウトにアクセントをつけたいとき便利です。

<div class=”en”><img src=”test.jpg” /></div>

.en {
width:256px;
height:256px;
}
.en img {
width:256px;
height:256px;
border-radius: 256px;
-webkit-border-radius: 256px;
-moz-border-radius: 256px;
}