border-radiusでボーダーの角丸を指定する【CSS】

border-radius系のプロパティは、ボーダーの角丸を指定するものです。

角丸の形状は半径で指定し、ボーダーの外側の輪郭に反映されます。

角丸の半径は、単位付き数値または%値で指定します。

値は1つ、もしくは半角スペースで区切って2つ指定することができ、1つ指定した場合は水平方向と垂直方向の両方に適用され、2つ指定した場合は水辺方向・垂直方向の順に適用されます。

関連記事
『CSSにおける長さ・大きさ・角度・時間の単位について【CSS】』

border-radiusでまとめて指定できる

border-radiusプロパティで、ボーダーの角丸をまとめて指定することもできます。

border-radiusプロパティで指定できる値は、border-radius系の各プロパティと同じで、それぞれの値は半角スペースで区切って指定できます。

必ずしも4つの値を指定する必要はなく、指定する値の数によって適用のされ方が異なります。

値が1つの場合

指定する値が1つの場合、すべての角に同じ値が適用されます。

値が2つの場合

指定する値が2つの場合、1つ目の値が上の左右角、2つ目の値が下の左右角に適用されます。

値が3つの場合

指定する値が3つの場合、1つ目の値が左上角、2つ目の値が右上角と左下角、3つ目の値が右下角に適用されます。

値が4つの場合

指定する値が4つの場合、左上、右上、右下、左下の順番に値が適用されます。

また、水平方向と垂直方向をセットで指定する場合は、半角スラッシュ（/）で区切って指定できます。