border-radius：要素の角丸についてまとめて指定する

border-radiusプロパティの説明

border-radiusは、要素の角を丸くする、つまり「角丸」にしたい場合に使用します。要素の四つの角はそれぞれ独立した値を持っていますが、このプロパティは全てをまとめて指定することができます。例えば、ボタンや入力エリアの角を丸くして柔らかい雰囲気のデザインにしたり、少し工夫して「フキダシ」状の見出しを作るなど、活用できる場面は多くあります。

このプロパティが指定されると、たとえボックスにボーダーが指定されていなくても、背景が描画される面も丸まって表示されます。

角丸の形状は、二つの辺の接続点に当たる角の頂点から、水平方向と垂直方向に伸ばした半径の組み合わせで決定されます。そのため、一つの要素は四つの角を持つわけですから、八つの値を使って角丸のカーブを表現することになります。

それぞれの値は、まとめて同じ値を指定することもできますし、個別に違う値を設定することもできます。詳しい記述方法は使用サンプルを参照してください。

border-radiusは、上下左右の四つの角丸をまとめて指定する短縮形プロパティです。左上のみを指定する場合はborder-top-left-radiusを、右上のみを指定する場合はborder-top-right-radiusを、右下のみを指定する場合はborder-bottom-right-radiusを、左下のみを指定する場合はborder-bottom-left-radiusを、それぞれ用います。

border-radiusに与えられる値

数字と単位で指定する

pxやemといった単位と数字を組み合わせて指定する方法です。「10px」や「2em」のように記述します。

パーセントで指定する

「5%」「10%」のように記述します。

border-radiusの使用サンプル

border-radiusの最もシンプルな指定方法は、全ての角丸を同じカーブにする場合です。この時、一つの値を指定すれば全てのカーブに対して同じ値が適用されます。

.br_sample_01 {
	border-radius: 5px;
}

値を二つ指定した場合は、一番目の値が左上と右下に適用され、二番目の値が右上と左下に適用されます。

.br_sample_02 {
	border-radius: 5px 20px;
}

値を三つ指定した場合は、三番目の値が右下に適用され、二番目の値は右上と左下の共通となります。

.br_sample_03 {
	border-radius: 5px 20px 40px;
}

そして、値を四つ指定した場合には、全ての角に対して別々のカーブを表現することができます。

.br_sample_04 {
	border-radius: 5px 20px 40px 80px;
}

水平方向と垂直方向のカーブを別々の値で指定したい場合は、左上、右上、右下、左下の半径をワンセットとして、それぞれのセットをスラッシュ（ / ）で区切る形で指定します。

.br_sample_08 {
	border-radius: 50px 25px 15px 0px / 25px 50px 15px 0px;
}