今回の記事では、CSS3の border-radius を使った円形いサムネイルの作り方を2種類紹介します。 まず簡単な方から説明しますが、サムネイル画像が正方形の場合であれば、画像のスタイル border-radius に大きめの値を指定するだけで、丸いサムネイルを作れますね。 <img src="thumb.png" width="150" height="150" style="border-radius:400px;" > サムネイルが長方形の場合 写真が正方形の場合でも、きれいな円にしたい場合は、サムネイルを背景画像(background-image)にすることで実現できます。イメージは↓のような感じです。 HTMLソース サムネイルの幅に合わせたボックスに、サムネイル画像を背景画像として設定し、border-radius で背景画像をクリップします。クリックできるようにする場合
![CSS3 の border-radius を使って円形のサムネイルを作る方法2つ](https://cdn-ak-scissors.b.st-hatena.com/image/square/c0c53975376e0d6c21a0700340c7f17ad98e9a52/height=288;version=1;width=512/http%3A%2F%2Fwebrocketsmagazine.com%2Fimg%2Fupload%2F3203.png)