border-radiusは、HTML要素の角を丸くするためのプロパティです。
ボタンや画像のような四角い要素の角を円や楕円にすることができ、サイト表現の幅が広がりますので是非使い方をマスターしましょう！
border-radiusの使い方
基本の使い方
border-radiusは角の丸みの半径の長さを指定します。
たとえばborder-radius: 10px;とすると、半径10pxの円弧と同等に角が丸められます。
border-radius: 20％;とすると、辺の20%の長さを半径とする円弧と同等に角が丸められます。
また、幅と高さが同じの場合にborder-radius: 50%;と設定すると正円になります。
See the Pen border-radius-sample1 by Usagi (@naniwa_usagi) on CodePen.
角の丸みを個別に設定する
パラメータを１つだけ設定すると４つの角全てに設定値が適用されますが、カンマ区切りで複数記述すれば個別に設定することができます。
たとえばパラメータを２つ設定した場合は１つ目のパラメータが左上と右下に、２つ目のパラメータが左下と右上に適用されます。
パラメータを３つ設定した場合は１つ目のパラメータが左上に、２つ目のパラメータが左下と右上に、３つ目のパラメータが右下に適用されます。
パラメータを４つ設定した場合は左上、右上、右下、左下の順に適用されます。
See the Pen border-radius-sample2 by Usagi (@naniwa_usagi) on CodePen.
角を楕円の形に丸める
２つの半径を「/（スラッシュ）」で区切って記述すると楕円の形に角を丸められます。
たとえばborder-radius: 10px / 50px;と記述した場合、横10px・縦50pxの楕円の円弧と同等に角が丸められます。
楕円の円弧もカンマ区切りで複数記述することで個別の角に対しての設定が可能です。
See the Pen border-radius-sample3 by Usagi (@naniwa_usagi) on CodePen.
まとめ
角を丸めると見た目を柔らかい印象になります。
モダンで親しみやすいWebデザイン等で頻出するテクニックですので、今回紹介した方法をぜひ参考にしてみてください。
