border-radiusジェネレーター

仕組み

4つのスライダーがあり、それぞれが各角に対応し、動かすたびに出力が即座に更新されます。「すべての角をリンク」が有効な場合、いずれかのスライダーを動かすと、CSSを再構築する前にその値が他の3つにコピーされます。値はCSSが実際に使う順序、つまり左上から時計回りに組み立てられます。同じ文字列がプレビュー要素のstyle.borderRadiusプロパティに直接書き込まれるため、これは出力の近似ではなく、コピーするCSSそのものです。

このツールはピクセル単位で動作し、ピクセルはパーセントとは異なる挙動をします。長方形にborder-radius: 50%を指定すると、各軸ごとに個別に計算されて楕円形になりますが、9999pxのような大きなピクセル値を使うと、多くの人が求める「ピル型」になります。仕様は重なり合う半径もクランプします。ある辺の半径の合計がその辺の長さを超えると、ブラウザはそれらを比例的に縮小します。

ツール全体はこのページで動くJavaScriptの数十行です。値はDOMからプレビューへ、そして出力ボックスへとネットワーク通信なしで移動します。開発者ツールのネットワークタブで確認できます。