border-radiusプロパティの基本的な使い方について書きます。border-radiusプロパティは、要素の角を丸くするプロパティです。具体的な書き方は、サンプルコードを確認してください。
記述の仕方
/* 記述例 */ /* 4つの角をまとめて指定する場合 */ セレクタ名{ border-radius: 楕円の半径; } /* 4つの角をそれぞれ指定する場合 */ セレクタ名{ border-radius: 左上 右上 右下 左下(楕円の水平方向の半径) / 左上 右上 右下 左下(楕円の垂直方向の半径); } /* 4つの角を個別に指定する場合 */ セレクタ名{ border-top-left-radius: 楕円の半径; } /* 左上 */ セレクタ名{ border-top-right-radius: 楕円の半径; } /* 右上 */ セレクタ名{ border-bottom-right-radius: 幅と高さに対する楕円の半径の割合(%); } /* 右下 */ セレクタ名{ border-bottom-left-radius: 楕円の水平方向の半径 楕円の垂直方向の半径; } /* 左下 */
上記が基本的な記述です。border-radiusでは、4つの角をまとめて指定する書き方とそれぞれ指定する書き方があります。また、左上・右上・右下・左下の角丸を個別に記述する場合は、border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radiusで指定します。border-radiusが取る値を文字で説明すると難しく感じるかもしれませんが、どれも「楕円の半径」を指定します。
border-radiusプロパティの基本情報
楕円の半径の値
- 数値で指定(px、em、%など)
サンプルコード
4つの角をまとめて指定する場合
四角形の4つの角をまとめて丸くする例です。
<div id="sample1"></div>
#sample1{ width:100px; height:100px; background:cyan; border-radius:10px; /* border-radius:30px; */ /* border-radius:50px; */ }
表示例
border-radiusの値を左から10px、30px、50pxで指定しています。黄色の図形を見れば分かると思いますが、角丸で円を表現することができます。表示例では、幅、高さがそれぞれ100pxの正方形に対して、border-radiusに辺の半分の長さ(50px)を指定しています。
4つの角をそれぞれ指定する場合
4つの角をそれぞれ違う値に指定した例です。
<div id="sample2"></div>
#sample2{ width:100px; height:100px; background:cyan; border-radius:50px 40px 30px 20px / 50px 40px 30px 20px; /* border-radius:50% 40% 30% 20% / 50% 40% 30% 20%; 上記と同じ値を%で指定 */ }
表示例
4つの角を個別に指定する場合
左上の角だけを角丸にする例です。
<div id="sample3"></div>
#sample3{ width:100px; height:100px; background:magenta; border-top-left-radius: 50px; / border-top-left-radius: 50%; 上記の書き換え / / border-top-left-radius: 50px 50px; 上記の書き換え / }
表示例
まとめ
border-radiusプロパティの基本的な使い方について書きました。記述の仕方が色々ありますが、よく使うのはセレクタ名{ border-radius: 楕円の半径; }だと思います。border-radiusプロパティの使用例としては、「ボタンの装飾」や「見出しの装飾」などです。
