border-bottom-left-radius - 要素の左下を丸める
投稿日: / 更新日:
スタイルシートのborder-bottom-left-radiusは、要素の左下の形状を調整するためのプロパティです。簡単に言うと、丸めます。
サンプルコード
border-bottom-left-radiusを指定した例です。border...という名前のプロパティですが、枠線はなくてもかまいません。
div {
border-bottom-left-radius: 50% 50% ;
}デモ
border-bottom-left-radiusを指定した例です。要素の左下が丸まっているのを確認して下さい。
値の指定
値は、水平方向、垂直方向の順に2つの値を指定します。例えば、10px 20pxと指定した場合、左端から10px右に、下端から20px上に離れた位置が円の中心となります。2つではなく、1つの値を指定すると、水平方向、垂直方向、どちらにもその値が適用されます。値の指定方法は主に下記の通りです。リンクをクリックすると、デモを確認できます。
| 項目 | 説明 |
|---|---|
| inherit | 親要素の値を引き継ぐ。例の場合、div要素のborder-bottom-left-radiusには、bodyに指定された値(100px 100px)が引き継がれる。 |
| initial | プロパティの初期値が適用される。この場合、角は丸まらない。 |
| percentage | パーセンテージで指定すると、水平方向の場合は要素の横幅、垂直方向の場合は要素の高さに対した割合が適用される。 |
| length | CSSで許可された方法で、サイズの指定ができます。(単位の一覧) |
仕組み
border-bottom-left-radiusを指定することによって、角丸ができる仕組みを解説します。理解しておくと、値を指定する時に迷うことがなくなります。ここでは、border-bottom-left-radiusに60px 80pxを指定したのを想定します。
| 順序 | 説明 |
|---|---|
| 円の中心が決まる | 指定した値によって、角丸を構成するための円の中心点の位置が決まります。例では60px 80pxを指定したので、要素の左から60px、下から80px離れた位置に、円の中心点が設定されます。 |
| 円が作成される | 水平方向、垂直方向に指定した長さが、そのまま、円の水平方向の半径、円の垂直方向の半径になります。つまり、60px 80pxを指定した場合、水平方向に半径60px、垂直方向に半径80pxのサイズの円が、中心点を基準として作成されます。 |
| 円に沿って丸まる | そして、今回はborder-bottom-left-radiusなので、円の左下に沿って、要素の左下が丸まります。このように、指定した値が影響を与えています。 |
ブラウザのサポート
2016年7月現在の、ブラウザのサポート状況は次の通りです。
Chrome
●
4+
2010年3月
Firefox
●
3+
2008年6月
Safari
●
3.1+
2008年3月
Ie
●
9+
2011年3月
Edge
●
12+
2015年3月
Opera
●
10.5+
2010年3月
Safari(iOS)
●
3.2+
2009年6月
Ie Mobile
●
10+
2012年6月
Chrome
●
47+
2015年12月
Android
●
2.1+
2010年1月
FF Mobile
●
44+
2016年1月
Opera Mobile
●
11+
2011年3月