border-radiusプロパティの説明
CSSのborder-radiusプロパティは、要素の角に丸みを指定します。要素の外周は既定値で直角のボックス型ですが、これを角丸にしてデザイン的な見た目に変更できます。
例えば、ボタンや入力エリアなど角を丸くして柔らかい雰囲気を演出したい時などに有用です。また、直線的なデザインでは埋もれてしまう要素に適用するなど、表現の幅を広げてくれます。
border-radiusを有効にすると、例えその要素に境界線が指定されていなくても、背景が描画される面が丸まって表示されます。つまり、他のボーダー関連のプロパティが境界の線を表すのに対して、このプロパティは境界そのものを丸くします。
角丸の形状は、二つの辺の接続点に当たる角の頂点から、水平方向と垂直方向に伸ばした半径の組み合わせで決定されます。そのため、ひとつの要素は四つの角を持つわけですから、最大で八つの値を使って角丸のカーブを表現することになります。
それぞれの値は、まとめて同じ値を指定することもできますし、個別に違う値を設定することもできます。詳しい記述方法はサンプルの項目で解説します。
border-radiusは、上下左右の四つの角丸をまとめて指定するショートハンド・プロパティです。それぞれの角には個別の値を指定することも可能です。具体的には以下のプロパティを同時に操作します。
border-top-left-radius：左上の角を対象に丸みを指定するborder-top-right-radius：右上の角を対象に丸みを指定するborder-bottom-right-radius：右下の角を対象に丸みを指定するborder-bottom-left-radius：左下の角を対象に丸みを指定する
border-radiusに指定できる値
<length>- CSSで使用できる長さを表す単位つきの値です。ピクセル、インチ、メートル法の単位による絶対値や、フォントサイズやビューポートの大きさを基準とした相対値が使用できます。負の数値は扱えません。
<percentage>- パーセントで割合を表すデータ型の値です。円の半径や楕円の半長軸または半短軸の長さを、要素の長さの割合から算出します。水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さを参照します。負の数値は扱えません。
border-radiusの使い方とサンプルコード
border-radiusプロパティの構文は以下の通りです。
/* <length>値 */
border-radius: 5px;
border-radius: 0.3in;
border-radius: 1.5em;
border-radius: 3rem;
border-radius: 5vwax;
/* <percentage>値 */
border-radius: 5%;
border-radius: 24%;
/* 左上と右下 | 右上と左下 */
border-radius: 10px 20px;
/* 左上 | 右上と左下 | 右下 */
border-radius: 3% 5px 6%;
/* 左上 | 右上 | 右下 | 左下 */
border-radius: 5px 50px 1rem 3%;
/* 水平方向の半径 / 垂直方向の半径 */
border-radius: 10px / 10%;
border-radius: 10px 20px / 10% 20%;
border-radius: 10px 20px 30px / 10% 20% 30%;
border-radius: 10px 20px 30px 40px / 10% 20% 30% 40%;
/* グローバル値 */
border-radius: inherit;
border-radius: initial;
border-radius: revert;
border-radius: unset;
border-radiusの実例
それでは、実際に要素の角を丸くしてみましょう。まず初めに一番単純な方法を確認します。border-radiusにひとつの値を指定した場合は、四つの角が全て同じように丸くなります。
#radius_box {
border-radius: 5px;
}
値を二つ並べて指定すると、一番目の値が左上と右下に適用され、二番目の値が右上と左下に適用されます。
#radius_box {
border-radius: 5px 20px;
}
そして、三つの値を指定すると、三番目の値が右下に適用され、二番目の値は右上と左下の共通となります。
#radius_box {
border-radius: 5px 20px 40px;
}
さらに、四つの値を指定すると、全ての角に対して別々のカーブを適用することになります。この時、角のカーブが干渉しても内容の配置は変わらない点に注目して下さい。
#radius_box {
border-radius: 5px 20px 40px 80px;
}
上記の例は、border-radiusで操作できる各プロパティを並べて書いた時と同じ扱いとなります。
#radius_box {
border-top-left-radius: 5px;
border-top-right-radius: 20px;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 80px;
}
水平方向と垂直方向の半径の操作
水平方向と垂直方向に対して別々のカーブを与えたい場合は、左上、右上、右下、左下の半径をワンセットとして、それぞれのセットをスラッシュ（/）で区切る形で指定します。これにより、歪んだ楕円形を表現することが可能となります。
#radius_box {
border-radius: 50px 25px 15px 0px / 25px 50px 15px 0px;
}
要素を楕円形にする
それでは、要素を完全な楕円形にするには、どのような値を指定すれば良いのでしょうか。これは簡単です。全ての半径を要素の長さの半分にすれば良いのです。
#radius_box {
border-radius: 50%;
}
要素の長さを絶対値で指定すれば、正確な図形を描くこともできます。例えば、幅と高さを100pxに揃えた正方形に先ほどのスタイルを適用すると、完全な円形として表示されます。
#radius_box {
width: 100px;
height: 100px;
border-radius: 50%;
}