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軸

この記事が気に入ったら
いいね ! お願いします(><;)

投稿者:和禅雅

この記事へのコメント