分類

border-radius | スタイルシートリファレンス

適用できる要素	全て
継承	しない
初期値	0

border-radiusとは？

border-radiusは要素の角を削って丸く表示させるCSSのプロパティです。一般的に角丸と言われるデザインはCSSのborder-radiusを使って実現が出来ます。

border-radiusプロパティをは4つの角を指定した角丸の設定の

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

がそれぞれの角を設定できるのに対してborder-radiusは4つの角の角丸の設定を一度に行うプロパティです。

border-radiusで指定できる値

border-radiusの値は楕円半径の長さを指定するのですが、まずは仕組みから解説します。

仕組み

border-radiusで作る角丸の丸みは楕円の4分の1の部分で表されます。つまり図にすると下記のイメージです。

要素の隅に円・楕円をイメージしその4分の1の部分が丸みとなります。またその円・楕円は半径が大きくなるほど丸みも大きくなります。

使い方

border-radiusでは値は円・楕円の半径を指定します。

半径はpx、%、emなどの単位を使って設定します。％は要素の幅と高さに対するパーセンテージとなります。

円の場合

下記のように設定します。

設定の仕方としては一括の設定や4つの隅ごとに設定する方法など複数パターンあります。

border-radiusの値の設定

/* 円の半径を4隅に一括設定 */
border-radius: 12px;

/* 左上と右下が前者、右上と左下が後者の指定 */
border-radius: 15px 5%;

/* 左上・右上と左下・右下 */
border-radius: 4px 6px 8px;

/* 左上→右上→右下→左下 */
border-radius: 3px 3px 12px 0;

楕円の場合

次に楕円の場合です。border-radiusでは4つの隅は楕円で計算も出来ます。

楕円の場合は値の設定の仕方が下記のようになります。

border-radiusの値の設定

/* 基本 */
border-radius: [水平方向の指定 / 垂直方向の指定];

/* 4隅の水平方向の楕円の半径 / 4隅の垂直方向の楕円の半径 */
border-radius: 8px / 10px;

/* 左上と右下の水平方向の楕円の半径 | 右上と左下の水平方向の楕円の半径 / 左上と右下の垂直方向の半径 | 右上と左下の垂直方向の楕円の半径 */
border-radius: 4px 3% / 10px 20px;

/* 左上の水平方向の楕円の半径 | 右上と左下水平方向の楕円の半径 | 右下の水平方向の楕円の半径 / 左上の垂直方向の半径 | 右上と左下の垂直方向の楕円の半径　| 右下の垂直方向の楕円の半径 */
border-radius: 1px 2px 3em / 6px 4% 10%;