前回要素に枠線を引くためのborderプロパティについて説明しましたが、ボーダーに関するプロパティは他にもあります。今回は角を丸くするborer-radiusプロパティについて解説します。
border-radiusプロパティ
border-radiusを使用することで要素のまわりに引いた枠線の四隅を丸めることができます。border-radiusプロパティはボーダーだけでなく要素全体に適用されるため、背景のみで枠線がない要素や画像についても角を丸くすることができます。
四隅をすべて異なる設定にすることも可能です。その場合は以下のプロパティを使用します。
〇〇 (セレクタ) { border-top-left-radius: 10px; }：左上の角に適用
〇〇 (セレクタ) { border-top-right-radius: 10px; }：右上の角に適用
〇〇 (セレクタ) { border-bottom-right-radius: 10px; }：右下の角に適用
〇〇 (セレクタ) { border-bottom-left-radius: 10px; }：左下の角に適用
border-radiusプロパティにスペースで区切って複数の値を設定することで、四隅の個別の設定を一括で指定することも可能です。
4つの角すべてに10pxを適用
〇〇 (セレクタ) { border-radius: 10px; }
左上、右下に10px、右上、左下に50pxを適用
〇〇 (セレクタ) { border-radius: 10px 50px; }
左上に10px、右上と左下に30px、右下に60pxを適用
〇〇 (セレクタ) { border-radius: 10px 30px 60px; }
左上に10px、右上に30px、右下に60px、左下に90pxを適用
〇〇 (セレクタ) { border-radius: 10px 30px 60px 90px; }
See the Pen
border-radius by そーたろう (@soh-files)
on CodePen.
border-radiusプロパティでは角の内側に置かれた円に沿うように角が丸められます。下の図ではグレーの四角に「border-radius: 10px;」を指定しています。四隅の白丸は半径10pxの円になっており、その縁に沿うように丸められているのが分かります(白丸は実際には表示されません)。円の半径を大きくすることで丸みを強くすることができ、半径を小さくすることで四角に近づくことが分かります。
See the Pen
border-radius -2 by そーたろう (@soh-files)
on CodePen.
上の例では「px」で指定していますが、「％」で指定することも可能です。「border-radius: 30%;」を指定すると下の例のようになります。四隅には横の半径が要素の幅の30%の長さ、縦の半径が要素の高さの30%の長さとなる楕円が置かれ、それに沿うように角が丸められます。
See the Pen
border-radius -3 by そーたろう (@soh-files)
on CodePen.
％を利用して要素を正円にすることも可能です。下の例では幅、高さが200pxの正方形に「border-radius: 50%;」を指定しています。このように正方形に50%を適用することで正円にすることができます。
See the Pen
poeWoXy by そーたろう (@soh-files)
on CodePen.
まとめ
今回は要素の角を丸めることができる「border-radius」プロパティについて解説しました。画像やボタンの角を丸めることで柔らかい印象にすることができるなどの効果が期待できますね。Webページに適切に取り入れてもらえればと思います。
コメント