CSS Border Radiusジェネレーター

CSS Border Radiusジェネレーターは、CSSを手書きせずにあらゆるHTML要素のborder-radius値を作成できるビジュアルエディターです。ピクセル値を推測してページを更新する代わりに、スライダーと数値入力で各角を独立して調整しながら、リアルタイムで形状の変化を確認できます。

このツールは3つのCSS単位に対応しています。px、%、remです。ピクセル値は固定サイズ要素に最も一般的な選択です。パーセンテージはレスポンシブな円や楕円に理想的です。rem値はルートフォントサイズベースのデザインシステムとborder-radiusの一貫性を保つのに役立ちます。

リンク/アンリンク切り替えは、4つの角がすべて連動するか独立して動くかを制御します。リンク時はスライダーを操作するとすべての角が同時に更新され、均一な角丸長方形の作成に最適です。アンリンク時は各角を個別に調整でき、有機的なブロブ、葉のモチーフ、吹き出しなどの非対称な形状を作成できます。

8つの組み込みプリセットが一般的な出発点を提供します：Square、Rounded、Pill、Circle、Blob、Leaf、Drop、Asymmetric。任意のプリセットサムネイルをクリックして即座に値を読み込み、そこから微調整できます。生成されるCSSは可能な限りコンパクトなショートハンドを使用し、すべての角が一致する場合は単一の値、対称ペアの場合は2つの値、各角が異なる場合は完全な4値表記を出力します。

すべての処理はブラウザ内で完全に行われます。データがサーバーに送信されることはありません。生成されたCSSをコピーしてスタイルシートに貼り付けるだけで使用できます。

1. ドロップダウンセレクターから単位（px、%、rem）を選択します。
2. リンクボタンを切り替えて、4つの角を連動させるか独立させるかを決定します。
3. スライダーをドラッグするか数値入力に値を入力して、各角（左上、右上、右下、左下）の半径を設定します。
4. 値を調整するとライブプレビューが即座に更新されます。オプションでプレビューボックスの幅と高さを変更できます。
5. またはプリセットサムネイルをクリックして、一般的な形状を出発点として読み込みます。
6. コピーボタンをクリックするか、Ctrl+Shift+Cを押して生成されたCSSをコピーします。
7. CSSをスタイルシートに貼り付け、任意の要素に適用します。