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/pc、em/rem、vw/vh、などを単位としているものを含め、同プロパティ内の全ての値に影響を与える。
See the Pen
border-radius other unit by Kozy a.k.a. Tab (@kozycorner)
on CodePen.