border-bottom-left-radiusプロパティは、ボックスの左下の角に対して設定します。設定する値によって、角に変化を与えますが、
という設定の仕方が分からない方いるでしょう。
そこで今回は、border-bottom-left-radiusプロパティの
・応用的な使い方
について説明していきます。
実際にborder-bottom-left-radiusプロパティのコードも記述していくので、理解度を高められるでしょう。
目次
border-bottom-left-radiusプロパティとは
border-bottom-left-radiusプロパティの読み方
border-bottom-left-radiusは、「ボーダー-ボトム-レフト-レイディウス」と読みます。
CSSでのそれぞれの単語は、
bottom：下端
left：左端
radius：半径
上記のような意味があります。
border-bottom-left-radiusプロパティの説明
border-bottom-left-radiusプロパティとは
ときに使う設定です。
border-bottom-leftは、枠線の左下の角を表しており、radiusの半径を調整することによって角が丸くなります。
しかし、枠線の左下の角の半径を指定するには、ボーダースタイルを設定するborderプロパティが必要になります。
つまり、border-bottom-left-radiusプロパティを使う場合、borderプロパティも併用するということです。
border-bottom-left-radiusプロパティで利用できる値
border-bottom-left-radiusプロパティでは以下の値を使うことができます。
| 値 | 説明 |
|---|---|
| length | lengthは、数値にpxやemの単位を付けて左下の角を調整します。 |
| percentage | %の単位を数値に付けて左下の角を調整する値がpercentageです。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| Internet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
border-bottom-left-radiusプロパティの基本的な使い方
border-bottom-left-radiusプロパティの使い方
border-bottom-left-radiusプロパティの設定はどのようにするのか、コードを以下に記述してきます。
See the Pen
border-bottom-left-radiusプロパティの使い方 by 吉井大輝 (@DaiW)
on CodePen.
まずボーダーのスタイルを決める設定を以下のようにします。
|
1 |
border:solid; |
borderプロパティのsolidという値は、1本の線を表したいときに使います。solid以外の値を指定すると、ボーダースタイルが変えられます。
そして、border-bottom-left-radiusプロパティに値を指定することで、左下の角が丸くなります。
border-bottom-left-radiusプロパティの値について
border-bottom-left-radiusプロパティの値が指定しているのは、水平方向と垂直方向です。
分かりやすいようにコードを交えて解説していきます。
See the Pen
jOMZPPE by 吉井大輝 (@DaiW)
on CodePen.
水平方向と垂直方向それぞれに指定したい場合、以下のように書きます。
|
1 |
border-bottom-left-radius:20px 20px; |
ですが、水平方向と垂直方向の値が同じであれば2つも値を書く必要はありません。
上記のborder-bottom-left-radiusプロパティの設定なら、以下のように20pxは一つで大丈夫です。
|
1 |
border-bottom-left-radius:20px; |
border-bottom-left-radiusプロパティの応用的な使い方
水平方向と垂直方向それぞれの値を変える
水平方向と垂直方向に違う値を入れるとどうなるのか見ていきましょう。
See the Pen
水平方向と垂直方向それぞれの値を変える by 吉井大輝 (@DaiW)
on CodePen.
上記の設定では水平方向を10px、垂直方向を80pxにしています。それぞれの値が違うほど、角も大きく変わります。
少し角がいびつになりますが、それぞれの値を変えてサイトのアクセントとして利用するという考え方もあります。
角がどのような形でも、さまざまな使い方ができるので、試しに設定してみてください。
まとめ
いかがでしたでしょうか？
今回は、border-bottom-left-radiusプロパティの設定の仕方や応用的な使い方についてご紹介しました。
border-bottom-left-radiusプロパティは、情報を見やすくさせるなど、使い方次第でサイトのイメージを変えられます。
border-bottom-left-radiusプロパティを設定するとき、ぜひ参考にしてください。
参考文献：MDN web docs｜border-bottom-left-radiusプロパティ : CSS のプロパティで、角の曲率を定義する楕円の半径 (または半長軸と半短軸の半径) を指定することで、要素の左下の角を丸めます
