HTMLいろいろ: 四角い画像を円形に切り抜く, 角を丸める

SNSなどでよく見られる円形にくりぬかれたプロフィール画像。 わざわざ加工してアップロードしたのかと思いきや、ダウンロードすると四角い画像が保存される。
不思議に感じるかもしれませんが、最近のHTMLではCSS3で追加されたborder関連プロパティで簡単に実現できます。
そのプロパティとは「border-radius」です。

border-radiusとは

「border-radius」は要素の4隅を、直角ではなく4分の1カットされた円または楕円に置き換えてくれるプロパティです。多くの要素に適用できるため、最近は「ちょっと角が丸まったボタン」など柔らかい印象を与えるようなWebデザインをする際によく活用されています。
使用例ですが、たとえば200px四方に指定した黒線ボックスの4隅を半径20pxの円に置き換えたい場合、
div {border-radius: 20px; border: 4px solid #000; height: 200px; width: 200px;}
というスタイルを指定してdivタグを配置すると以下のような角が丸められたボックスが表示されます。

また楕円にすることも可能で、以下のように2つの値をスラッシュ(/)で区切って指定すると水平方向/垂直方向の順でサイズ指定ができます。
div {border-radius: 20px / 10px; border: 4px solid #000; height: 50px; width: 200px;}

SNSのプロフィール画像の円形切り抜きは、このプロパティを使って円形になるようなパラメータ指定をしていた、ということですね。

ちなみにborderプロパティと同じく値は最大4つまで指定可能で、
　・値が1つ　＝　4隅すべて
　・値が2つ　＝　左上と右下　右上と左下
　・値が3つ　＝　左上　右上と左下　右下
　・値が4つ　＝　左上　右上　右下　左下
と、marginやpaddingに似たパラメータ適用になるようです。

余談ですが、円を指定する場合は「9999px」など非常に大きい値を指定してやることが多いようです。
これは「最大値は要素の水平/垂直サイズに制限される」という仕様を逆手に取ったもので、CSSになれたデザイナーの多くが利用しているらしい、とのこと。 一括指定したときは「heightの半分の値」もしくは「widthの半分の値」のうちどちらか小さいほうに合わせられるため、無駄に手間が省けて便利ですね。
必ず楕円になる「50%」という割合指定とともに、CSS編集の手間を省くテクニックとしてよく活用されるようです。

4隅のどれかひとつだけにスタイル指定するには

このborder-radiusですが、従来からあるborderプロパティと同様に、どれかひとつの角だけを指定できるプロパティが用意されています。
4隅の角を指定する必要があるため、上下左右で指定しているborderとは異なり
　・左上　＝　border-top-left-radius
　・右上　＝　border-top-right-radius
　・左下　＝　border-bottom-left-radius
　・右下　＝　border-bottom-right-radius
という対応となっています。

たとえば以下のように左上だけ楕円にするプロパティを使えば、その他3つの角は直角のまま左上が楕円、というボックスが表示されます。
div {border-top-left-radius: 40px 20px; border: 4px solid #000; height: 50px; width: 200px;}

どこか1つの角だけ指定したい場合は上記の個別プロパティ、複数箇所を指定したい場合はborder-radiusで一括、という使い分けができるということですね。

注意が必要なのは、楕円を指定するときに2つの値を「/」で区切らないこと。
border-radiusは値の数が1～4個と変動することから「/」区切りの前後で水平方向と垂直方向の値を分けていますが、上記4つの個別プロパティは「値が1つなら水平垂直一括指定」「値が2つなら水平　垂直の順で指定」と決まっています。 そのため誤って「/」で区切ってしまうと、このプロパティは正しく認識されず無効になってしまいます。

留意すべき点

このborder-radiusで留意すべき点はいくつかあります。

ユーザー視点では、やや古いバージョンのブラウザやニッチなブラウザでは作り手の意図と違う表示になるかもしれない点です。
これは多くのブラウザがこのプロパティに正式対応したのが比較的最近であるためで、古いブラウザではborder-radiusを正しく解釈できない可能性がある、ということですね。 ただそういったブラウザを使用するユーザーはごく少数に限られると考えられ、「これから」のWebデザインをする作り手はそれほど気にする必要はないかもしれません。

作り手側で問題になりやすいのは、入れ子構造などやや複雑なレイアウトを作っている場合に「border-radiusが効かない」という勘違いが起きることです。
たとえば、直径50pxの円に50px四方の画像（ボックス）を配置して丸く切り抜いてもらおう、と考えて以下のようなスタイルを指定すると、
div.parent {border-radius: 9999px; border: 4px solid #000; height: 50px; width: 50px;}
img.child {height: 50px; width: 50px;}
ほとんどのブラウザでは入れ子にした画像（ボックス）の四隅が丸枠からはみ出した残念な結果になります。

これは、border-radiusは指定した要素にしか適用されないこと、そしてブロックからはみ出した部分はそのまま表示する(overflow: visible)という初期値設定により、このような表示になります。

入れ子構造をやめて画像に直接border-radiusスタイルを指定すれば簡単に解決しますが、それなら初めから円形に切り抜いた画像を用意すれば事足りる話です。これを解決するには、親要素に「overflow: hidden」プロパティを指定してはみ出した部分を表示させないようにしましょう。
div.parent {border-radius: 9999px; border: 4px solid #000; height: 50px; overflow: hidden; width: 50px;}
img.child {height: 50px; width: 50px;}
上のようにはみ出した部分を隠すスタイルを指定すれば、親要素からはみ出した部分は非表示となり丸く切り抜かれた結果となるはずです。