block要素の角丸を表現する方法一覧
border-radiusを使ってblock要素のコーナーを丸くする方法のまとめ
四隅の一括指定、各角の部分指定、さらに各角の縦横それぞれの大きさを細かく指定する事ができる。
一括して角丸を指定（正円の作り方）
widthとheithの値が同数である事が条件
ひと角ずつ指定（楕円形のr）
ひとつの角に対し半径(r)のx軸y軸を個別に異なる値を与える。
『/』前の数値がx軸・『/』後の数値がy軸 = x軸とy軸の値は『/』で区切る
解説
以下の通り省略可能
| コード | 各所の適用場所 |
|---|---|
| border-radius:A; | A=全ての角・全てのx軸y軸 |
| border-radius:A B; | A=左上と右下 |
| B=右上と左下 | |
| border-radius:A B C; | A=左上 |
| B=右上と左下 | |
| C=右下 | |
| border-radius:A B C D; | A=左上 |
| B=右上 | |
| C=右下 | |
| D=左下 | |
| border-radius:Ax / Ay; | Ax=全ての角のx軸全て |
| Ay=全ての角のy軸全て | |
| border-radius:Ax Bx / Ay By; | Ax=左上と右下のx軸 |
| Bx=右上と左下のx軸 | |
| Ay=左上と右下のy軸 | |
| By=右上と左下のy軸 | |
| border-radius:Ax Bx Cx / Ay By Cy; | Ax=左上のx軸 |
| Bx=右上と左下のx軸 | |
| Cx=右下のx軸 | |
| Ay=左上のy軸 | |
| By=右上と左下のy軸 | |
| Cy=右下のy軸 | |
| border-radius:Ax Bx Cx Dx / Ay By Cy Dy; | Ax=左上のx軸 |
| Bx=右上のx軸 | |
| Cx=右下のx軸 | |
| Dx=左下のx軸 | |
| Ax=左上のy軸 | |
| By=右上のy軸 | |
| Cy=右下のy軸 | |
| Dy=左下のy軸 |
この記事へのコメント