CSS 境界半径ジェネレーター

CSS Border Radius Generator は、CSS border-radius プロパティのビジュアル エディタです。各コーナーのスライダーをドラッグし、プレビュー要素をリアルタイムで監視し、生成される正確な CSS をコピーします。ピクセル値を推測したり、ページをリロードしたりする必要はありません。

境界線半径プロパティはシンプルに見えますが、人をつまむコンパクトな省略形があります。1 つの値が 4 つのコーナーすべてを丸め、2 つの値が 2 つの対角線を設定し、4 つの値が左上から時計回りに動作します。 このツールを使用すると、各コーナーを個別に設定し、最も短い同等の短縮形を自動的に出力できるため、CSS はクリーンなままになります。

すべてがブラウザで実行されます。 カード、ピル、サークル、ブロブなどのプリセットから始めて、各コーナーを微調整し、単位をピクセルとパーセンテージの間で切り替えて、宣言をコピーします。 アカウントもアップロードもありません。ページが読み込まれた後もオフラインで動作します。

正方形でないものではパーセンテージとピクセルの動作が異なり、その違いは人々を驚かせます。ピクセル半径は隅々まで同じ曲線ですが、各軸に対してパーセンテージは個別に測定されるため、広い箱の 50 パーセントは円ではなく楕円になります。これは、長方形を丸やレンズの形状に変える特性です。仕様では、不可能な形状からも保護されます。1 つのエッジに沿った半径が合計すると、そのエッジの長さを超えると、ブラウザは要素上のすべての半径を重ね合わせるのではなく比例して縮小するため、大きな値は静かに成長を停止します。出力には最短の有効な速記が使用され、そのため 4 つの等しい角が 1 つの数値に折りたたまれます。