CSS3のプロパティについて解説する連載です。今回は角丸を指定するborder-radiusの使い方について解説します。
border-radiusの指定方法
border-radiusを使うと、CSS3だけで要素の輪郭を角丸にできます。border-radiusは下のように指定します。
border-radius: 左上 右上 右下 左下;
要素の左上から順番に、時計回りに値（pxやem、%）を指定していきます。border-radiusで指定した値が半径となり、角丸が表現されます。なお、角丸はボーダーの外側に適用されるので注意しましょう。
なお、水平方向と垂直方向で値を変えたい場合は、半角スラッシュを使って下のように指定します。
border-radius: 左上 右上 右下 左下 / 左上 右上 右下 左下（水平方向 / 垂直方向）
水平方向と垂直方向で値を変えると、角丸を楕円で表現することも可能です。
border-radiusの具体例
それではborder-radiusの具体例について見ていきましょう。
全て同じ値を指定する
border-radius: 25px;
全て同じ値を指定した場合、上のように均一な角丸で表現することができます。
角丸の値を個別に設定する
border-radius: 10px 0 10px 25px;
四隅の角丸を異なる値で指定する場合です。左上から順番に、時計回りに指定すればOKです。
水平方向と垂直方向を別々に指定する
border-radius: 50px / 20px;
水平方向と垂直方向を別々に指定すると、角丸が楕円で表現できます。半角のスラッシュを使って、前から水平方向、垂直方向の順に指定していきます。
border-radius: 50px 0 50px 0 / 10px 0 10px 0;
この場合でも、四隅を別々に指定することができます。先ほどと同じように、左上から時計回りに指定していけばOKです。
あとがき
border-radiusの指定方法について解説しました。従来は画像を使っていた場面も多いかと思いますが、border-radiusを使うとCSS3だけで角丸が表現できます。ぜひ活用していってください。