CSS で画像を丸く表示する方法

2017/02/15

ブログのアイキャッチ画像や記事の一覧リストの画像が丸くなっているサイトを見掛けることがあると思います。わざわざ画像を丸く切り取っているかと思いがちですが、CSS で簡単に実装することができます。

例えばこの画像をご覧ください。ごく普通の四角い画像です。

こちらと全く同じ画像で CSS を適用させてあげると、丸く切り取られたような形状に早変わりします。イメージ要素の縦横のサイズは変わりません。

それでは実際に適用させる方法を見ていきましょう。

画像イメージに CSS を適用し丸く表示する方法

border-radius による角丸表現

先程の画像に適用している CSS プロパティは border-radius です。このプロパティ値は四角い角を丸くする効果があり、最大限角を丸くすると円になる仕組みを利用しています。この border-radius に設定する値は、margin や padding と同様に、1個から最大4個まで設定することができ、4個に満たない場合は他の設定値で情報が補填され画面描画されるようになります。

まず border-radius の定義を見てください。

border-radius: [左上の角丸] [右上の角丸] [右下の角丸] [左下の角丸];

それぞれ margin や padding のようにサイズを指定します。margin は上から時計回りで設定しますが、border-radius は左上から時計回りで定義すると覚えておきましょう。また引数の数によって、それぞれ次のように適用されます。

  • border-radius: 10px; /* 引数1つ */
    4方向全て 10px の角丸を設定
  • border-radius: 10px 40px; /* 引数2つ */
    左上と右下が 10px、右上と左下が 40px の角丸を設定
  • border-radius: 10px 40px 70px; /* 引数3つ */
    左上 10px、右上と左下が 40px、右下 70px の角丸を設定
  • border-radius: 10px 40px 70px 4px; /* 引数4つ */
    左上 10px、右上 40px、右下 70px、左下 4px の角丸を設定

実際にこのように不足分の引数値が補填されていきます。

css-border-radius01

言葉では分かりにくいので、実際それぞれのプロパティを適用させた画像を見てみましょう。

border-radius の引数の数による表現イメージサンプル

4方向全て 10px の角丸が設定されます。

左上と右下が 10px、右上と左下が 40px の角丸が設定されます。

左上 10px、右上と左下が 40px、右下 70px の角丸が設定されます。

左上 10px、右上 40px、右下 70px、左下 4px の角丸が設定されます。

あとはこの border-radius の値を最大限まで大きくすることで、枠が真っ直ぐにならないようになり円形になるというわけです。

border-radius で丸を表現する

まず、丸く切り取りたい画像が正方形でないと真円(まん丸)にならず楕円になってしまうので予めご注意ください。そして対象となる画像のサイズがポイントになります。これまで例に挙げた画像ファイルは全て 150px × 150px のサイズです。

この場合、最大となる角丸のサイズは半分の 75px となります。もし img タグ自体に border や padding を仕掛けているのであれば、そのサイズを加えた上で2で割って計算してください。ここで設定する CSS のプロパティ値は次の通りです。

すると最初に紹介したように、画像イメージが丸く仕上ります。

これで画像イメージを編集することなく、CSS によって丸く切り抜くことができますね。

PAGE TOP ↑