最終更新日 2021年4月7日

border-radiusプロパティ

border-radiusは、4つの角丸をまとめて指定するプロパティです。角の丸みは、水平方向と垂直方向の半径の組み合わせで表現します。半径の値は、数値かパーセント値で指定します。

1つの角丸は、水平半径と垂直半径をスラッシュで区切り、違う値を指定することもできます。

値は4つまで記述でき、以下のような決まりがあります。

・値を4個指定した場合、4つの値は、左上、右上、右下、左下の角の丸みをそれぞれ順に表す
・値が3個の場合は、右上と左下の角は同じ値
・値が2個の場合は、左上と右下、右上と左下の角は同じ値
・値が1個の場合は、すべての角が同じ値

なお、角丸をそれぞれ個別に指定する場合は、下記プロパティを使用します。

・border-top-left-radius
・border-top-right-radius
・border-bottom-left-radius
・border-bottom-right-radius

CSS3での変更点

・border-radiusは、CSS3から新しく追加されたプロパティです。

初期値	適用先	継承
0	すべての要素	なし

値	説明	表示例
数値	半径を「px」や「em」で指定します。	border-radius: 10px; border-radius: 10em;
パーセント値	ボックスの幅と高さに対する割合で指定します。	border-radius: 30%; border-radius: 50%;

サンプルコード

border-radius: 10px;
border-radius: 10em;
border-radius: 10%;
border-radius: 10px 10px;
border-radius: 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
border-radius: 10px / 10px;
border-radius: 10px 10px / 10px 10px;
border-radius: 10px 10px 10px / 10px 10px 10px;
border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;

参考文献：CSS Backgrounds and Borders Module Level 3

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。