CSS角丸ジェネレーター

使い方

1. スライダーを調整するか値を入力して、各コーナーの角丸を設定します。
2. 「コーナーを連動」を切り替えると、全コーナーを一括または個別に変更できます。
3. 単位（px、%、rem、em）を選択します。
4. リアルタイムでプレビューが更新されます。
5. コピーボタンで生成されたCSSをコピーできます。

CSS角丸とは

CSSのborder-radiusプロパティは、要素の外枠の角を丸くします。1つの値で均一な角丸を作ったり、各コーナーを個別に指定して非対称な形状を作れます。ボタン、カード、アバター（50%で円形）、装飾的なUI要素などで広く使われています。

構文ガイド

• 値1つ（例：8px）：4つのコーナーすべてが同じ値になります。
• 値4つ（例：10px 20px 30px 40px）：左上・右上・右下・左下の順（時計回り）。
• パーセント（例：50%）：要素の寸法に対する相対値。正方形に50%を指定すると円になります。

プライバシー

すべての処理はブラウザ内で完結します。データがサーバーに送信されることはありません。