CSS サークル ジェネレーター — 50% の境界線の半径
CSS の境界線の半径を視覚的にデザインします。ピクセルまたはパーセント単位の 4 つの独立したコーナー スライダー、インスタント サークルと錠剤のリンクオールコーナー ショートカット、さらにランダム化された形状の有機ブロブ モードを備えています。
処理中...
0%
結果
このページでは、4 つの角すべてがリンクされ、CSS のみを使用してボックスを円に変える値である 50% に設定された境界半径ジェネレーターが開きます。正直に言うと、正方形の箱では完全な円になりますが、長方形の箱では同じ 50% で代わりにスタジアムのような楕円が作成されます。これは、各角がその 4 分の 1 を丸めるだけであるためです。
この区別が重要なのは、CSS で円形のアバター、アイコン バッジ、ステータス ドットを作成する最も一般的な方法は 50% の境界線半径であるためです。マスクで円をクリップしたり、SVG で円を描画したりするよりもはるかに簡単で、固定ピクセル半径ではなく相対的なパーセンテージであるため、どのサイズでも鮮明なままです。
独自の CSS でボックスを固定正方形サイズに切り替えて完全な円に固定するか、錠剤のような形状にするために意図的に長方形のままにします。いずれにしても、ここでは角がリンクされたままになるため、結果の CSS をコピーする間、1 つのスライダーで 4 つすべてが同期されます。