CSS ピル / スタジアム形状ジェネレーター
CSS の境界線の半径を視覚的にデザインします。ピクセルまたはパーセント単位の 4 つの独立したコーナー スライダー、インスタント サークルと錠剤のリンクオールコーナー ショートカット、さらにランダム化された形状の有機ブロブ モードを備えています。
処理中...
0%
結果
このページでは、4 つの角すべてがリンクされ、非常に大きな半径 (999 ピクセル) にプッシュされた境界半径ジェネレーターが開きます。一般的なボタン サイズの長方形では、これほど大きい半径はブラウザによってボックスの高さのちょうど半分にクリップされます。これにより、角がわずかに丸い正方形ではなく、完全に丸い錠剤またはスタジアムの形状が生成されます。
これが、ピル ボタンが各ボタンの高さに合わせて調整された正確な半径値を必要としない理由です。高さの半分より余裕を持って大きい数値であれば、同じクリップされた結果が得られます。これが、999 ピクセル (または 9999 ピクセル) が、CSS で「これをすべて丸める」を表す非公式のコミュニティの略語になっている理由でもあります。
独自のレイアウトでボックスのサイズを変更すると、ブラウザーが常に自動的にボックスの半分にクリップするため、同じ 999 ピクセルでどの高さでも完全な錠剤が生成され続けます。正しく表示されたら CSS をコピーするか、コーナーのリンクを解除して非対称カプセルを構築します。