border-radiusの合計値が100%を超えたら何が起こるの?

CSSのborder-radiusプロパティで、1辺に指定されている値がその辺の大きさを超えている時、何が起こるのかを検証。なお、このような実装は適切ではなく、ブラウザ間での挙動が異なる可能性もあるので避けてほしい。また、本稿ではborder-radiusの仕様は説明しない。

確認:合計値が100%を超えないとき

See the Pen
border-radius 50
by Kozy a.k.a. Tab (@kozycorner)
on CodePen.

全ての角・方向に対して50%を指定した。この時、要素は正円形に見える。

実験1:上辺の合計値が100%を超えてしまった時

See the Pen
border-radius 100+50
by Kozy a.k.a. Tab (@kozycorner)
on CodePen.

第1引数のみを変えて、上辺の左上の角の値を100%に設定して、上辺の合計値が100%を超えるように設定した。

引数を1つしか変えていないにも関わらず、他の3辺についても挙動が変わっていることが確認できる。

実験2:上辺の合計値を変えてみる

See the Pen
border-radius 200
by Kozy a.k.a. Tab (@kozycorner)
on CodePen.

先ほどの例では上辺の合計が150%になるように設定したが、上辺の左上の角の値を200%、上辺の右側の角の値も200%にして、上辺の合計値が400%になるように変更すると、さらに挙動が変わる。

仮説

辺の長さをl、その辺に指定されている値の合計をnとしたとき、4辺のうち1辺でもl/nをが1を下回っていれば、そのうち一番小さな値を全ての値にかけたものと同じ挙動を示す。

検証

実験2の例では、合計値が400%であるから、全ての値を1/4倍した以下と同一の挙動を示すことになる。

See the Pen
border-radius 1/4
by Kozy a.k.a. Tab (@kozycorner)
on CodePen.

補足

この挙動は単位%で指定されている値以外にもpx/pt/pcem/remvw/vh、などを単位としているものを含め、同プロパティ内の全ての値に影響を与える。

See the Pen
border-radius other unit
by Kozy a.k.a. Tab (@kozycorner)
on CodePen.

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

%d人のブロガーが「いいね」をつけました。