border-radius:要素の角を丸くする値を一括指定する

初期値 0
適用対象 全ての要素、::first-letterborder-collapsecollapseの場合は表の内部要素であるinline-tableには適用されない。
継承 しない
アニメーション <length>値、<percentage>値、calc();
対応ブラウザ caniuseで確認

border-radiusプロパティの説明

border-radiusは、要素の角に丸みを指定します。要素の外周は既定値で直角のボックス型ですが、これを角丸にしてデザイン的な見た目に変更できます。

例えば、ボタンや入力エリアなど角を丸くして柔らかい雰囲気を演出したい時などに有用です。また、直線的なデザインでは埋もれてしまう要素に適用するなど、表現の幅を広げてくれます。

border-radiusを有効にすると、例えその要素に境界線が指定されていなくても、背景が描画される面が丸まって表示されます。つまり、他のボーダー関連のプロパティが境界の線を表すのに対して、このプロパティは境界そのものを丸くします。

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

イメージ図

それぞれの値は、まとめて同じ値を指定することもできますし、個別に違う値を設定することもできます。詳しい記述方法はサンプルの項目で解説します。

border-radiusは、上下左右の四つの角丸をまとめて指定するショートハンド・プロパティです。それぞれの角には個別の値を指定することも可能です。具体的には以下のプロパティを同時に操作します。

border-radiusに指定できる値

<length>
CSSで使用できる長さを表す単位つきの値です。ピクセル、インチ、メートル法の単位による絶対値や、フォントサイズやビューポートの大きさを基準とした相対値が使用できます。負の数値は扱えません。
<percentage>
パーセントで割合を表すデータ型の値です。円の半径や楕円の半長軸または半短軸の長さを、要素の長さの割合から算出します。水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さを参照します。負の数値は扱えません。

border-radiusの使い方とサンプル

border-radiusプロパティの構文は以下の通りです。

CSS
/* <length>値 */
border-radius: 5px;
border-radius: 0.3in;
border-radius: 1.5em;
border-radius: 3rem;
border-radius: 5vwax;

/* <percentage>値 */
border-radius: 5%;
border-radius: 24%;

/* 左上と右下 | 右上と左下 */
border-radius: 10px 20px;

/* 左上 | 右上と左下 | 右下 */
border-radius: 3% 5px 6%;

/* 左上 | 右上 | 右下 | 左下 */
border-radius: 5px 50px 1rem 3%;

/* 水平方向の半径 / 垂直方向の半径 */
border-radius: 10px / 10%;
border-radius: 10px 20px / 10% 20%;
border-radius: 10px 20px 30px / 10% 20% 30%;
border-radius: 10px 20px 30px 40px / 10% 20% 30% 40%;

/* グローバル値 */
border-radius: inherit;
border-radius: initial;
border-radius: revert;
border-radius: unset;

border-radiusの実例

それでは、実際に要素の角を丸くしてみましょう。まず初めに一番単純な方法を確認します。border-radiusに一つの値を指定した場合は、四つの角が全て同じように丸くなります。

CSS
#radius_box {
	border-radius: 5px;
}
表示確認

値を二つ並べて指定すると、一番目の値が左上と右下に適用され、二番目の値が右上と左下に適用されます。

CSS
#radius_box {
	border-radius: 5px 20px;
}
表示確認

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

CSS
#radius_box {
	border-radius: 5px 20px 40px;
}
表示確認

さらに、四つの値を指定すると、全ての角に対して別々のカーブを適用することになります。この時、角のカーブが干渉しても内容の配置は変わらない点に注目して下さい。

CSS
#radius_box {
	border-radius: 5px 20px 40px 80px;
}
表示確認

上記の例は、border-radiusで操作できる各プロパティを並べて書いた時と同じ扱いとなります。

CSS
#radius_box {
	border-top-left-radius: 5px;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 40px;
	border-bottom-left-radius: 80px;
}

水平方向と垂直方向の半径の操作

水平方向と垂直方向に対して別々のカーブを与えたい場合は、左上、右上、右下、左下の半径をワンセットとして、それぞれのセットをスラッシュ(/)で区切る形で指定します。これにより、歪んだ楕円形を表現することが可能となります。

CSS
#radius_box {
	border-radius: 50px 25px 15px 0px / 25px 50px 15px 0px;
}
表示確認

要素を楕円形にする

それでは、要素を完全な楕円形にするには、どのような値を指定すれば良いのでしょうか。これは簡単です。全ての半径を要素の長さの半分にすれば良いのです。

CSS
#radius_box {
	border-radius: 50%;
}
表示確認

要素の長さを絶対値で指定すれば、正確な図形を描くこともできます。例えば、幅と高さを100pxに揃えた正方形に先ほどのスタイルを適用すると、完全な円形として表示されます。

CSS
#radius_box {
	width: 100px;
	height: 100px;
	border-radius: 50%;
}
表示確認

border-radiusに関連するCSSプロパティ

境界線・輪郭線
border 要素の周囲に境界線を付ける
border-bottom 要素の底辺に境界線を付ける
border-bottom-color 要素の底辺に表示する境界線の色を指定する
border-bottom-left-radius 要素の左下の角丸を指定する
border-bottom-right-radius 要素の右下の角丸を指定する
border-bottom-style 要素の底辺に表示する境界線の形状を指定する
border-bottom-width 要素の底辺に表示する境界線の幅を指定する
border-color 要素の境界線の色を指定する
border-image 要素の境界線に画像を指定する
border-image-outset 境界線の画像が要素の縁からはみ出す距離を指定する
border-image-repeat 境界線に表示させる画像の繰り返し方を指定する
border-image-slice 境界線に指定した画像の使用範囲を指定する
border-image-source 境界線に使用する画像ファイルを指定する
border-image-width 境界線に指定した画像の幅を指定する
border-left 要素の左辺に境界線を付ける
border-left-color 要素の左辺に表示する境界線の色を指定する
border-left-style 要素の左辺に表示する境界線の形状を指定する
border-left-width 要素の左辺に表示する境界線の幅を指定する
border-radius 要素の角丸についてまとめて指定する
border-right 要素の右辺に境界線を付ける
border-right-color 要素の右辺に表示する境界線の色を指定する
border-right-style 要素の右辺に表示する境界線の形状を指定する
border-right-width 要素の右辺に表示する境界線の幅を指定する
border-style 境界線の形状を指定する
border-top 要素の上辺に境界線を付ける
border-top-color 要素の上辺に表示境界線の色を指定する
border-top-left-radius 要素の左上の角丸を指定する
border-top-right-radius 要素の右上の角丸を指定する
border-top-style 要素の上辺に表示する境界線の形状を指定する
border-top-width 要素の上辺に表示する境界線の幅を指定する
border-width 境界線の幅を指定する
outline アウトラインの装飾を一括で指定する
outline-color アウトラインの色を指定する
outline-offset アウトラインと要素の空間を指定する
outline-style アウトラインの形状を指定する
outline-width アウトラインの太さを指定する