最終更新日

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外部リンク
HOME