CSS Border Radius生成器 - 角丸をビジュアル編集 オンライン
ビジュアルコントロールでCSS border-radiusを生成。角丸、ピル型、有機的なブロブデザイン — 即使えるCSSをコピー。
よくある質問
CSS border-radiusとは何ですか？
CSS border-radiusは、要素の外側ボーダーエッジのコーナーを丸くするショートハンドプロパティです。単一の半径を設定して円形のコーナーを作成したり、各コーナーに2つの半径（水平と垂直）を設定して楕円形のコーナーを作成できます。丸いボタン、カード、アバター、ピル型要素、装飾的な形状を作成するために最もよく使用されるCSSプロパティの一つです。
このborder-radiusジェネレーターの使い方は？
シンプルモード（4コーナー制御）または詳細モード（各コーナーの水平/垂直8値）を選択します。スライダー、数値入力、またはプレビュー要素上のハンドルをドラッグして各コーナーの半径を調整します。リンクトグルを使用してすべてのコーナーを同じ値に設定できます。プリセットの形状から始めてカスタマイズすることもできます。生成されたCSSコードをワンクリックでコピーできます。
このツールは安全でプライバシーは保護されますか？
はい。このツールはクライアントサイドJavaScriptを使用して100%ブラウザ内で実行されます。いかなるデータもサーバーに送信されません。すべてのCSS生成とプレビューレンダリングはデバイス上でローカルに行われ、完全なプライバシーが保証されます。
シンプルモードと詳細モードの違いは何ですか？
シンプルモードは各コーナーに1つの値（円形の丸み）を使用し、border-radius: 10px 20px 30px 40pxのようなCSSを生成します。詳細モードはスラッシュ記法を使用し、各コーナーに2つの値（水平と垂直の半径）を設定して、border-radius: 30% 70% 70% 30% / 70% 30% 30% 70%のようなCSSを生成します。スラッシュ記法は水平と垂直の曲率が異なる楕円形のコーナーを作成し、有機的なブロブ形状を可能にします。
パーセントとピクセル単位はいつ使い分けるべきですか？
パーセント（%）は要素のサイズに比例してborder-radiusをスケールさせたい場合に使用します。例えば、border-radius: 50%は要素の寸法に関係なく常に完全な円を作ります。ピクセル（px）は要素のサイズに関係なく固定された一貫した曲率が必要な場合に使用します。例えば、border-radius: 8pxは異なるサイズのカードで一貫した丸みを提供します。
CSSショートハンド最適化はどのように機能しますか？
ツールは自動的に最もコンパクトな有効なCSSを生成します。4つのコーナーがすべて同じ場合（例：10px）、値を4回繰り返す代わりにborder-radius: 10pxを出力します。対角のコーナーが一致する場合（TL=BRおよびTR=BL）、2値ショートハンドを使用します。これはCSS仕様のborder-radiusショートハンド解決方法と一致し、冗長なコードの記述を省きます。
コード例
// CSS Border Radius Generator
function optimizeShorthand(values, unit) {
const [a, b, c, d] = values;
if (a === b && b === c && c === d) return `${a}${unit}`;
if (a === c && b === d) return `${a}${unit} ${b}${unit}`;
if (b === d) return `${a}${unit} ${b}${unit} ${c}${unit}`;
return `${a}${unit} ${b}${unit} ${c}${unit} ${d}${unit}`;
}
function generateBorderRadius(tl, tr, br, bl, unit = 'px') {
return `border-radius: ${optimizeShorthand([tl, tr, br, bl], unit)};`;
}
function generateElliptical(h, v, unit = '%') {
const hPart = optimizeShorthand(h, unit);
const vPart = optimizeShorthand(v, unit);
if (hPart === vPart) return `border-radius: ${hPart};`;
return `border-radius: ${hPart} / ${vPart};`;
}
console.log(generateBorderRadius(10, 20, 10, 20, 'px'));
// border-radius: 10px 20px;
console.log(generateBorderRadius(8, 8, 8, 8, 'px'));
// border-radius: 8px;
console.log(generateElliptical([30, 70, 70, 30], [70, 30, 30, 70], '%'));
// border-radius: 30% 70% / 70% 30%;