🔄 CSS角丸生成

CSS角丸生成について

border-radius CSSプロパティは要素の外側の境界線のコーナーを丸くします。全コーナーに1つの値を設定するか、非対称形状のために4つの値（左上、右上、右下、左下）を設定できます。%単位で円や楕円を作成できます。本ジェネレーターでリアルタイムコントロールにより各コーナーを調整し、即座にコピーできます。

コントロール可能なプロパティ

• 左上 —— 左上コーナーの半径。
• 右上 —— 右上コーナーの半径。
• 右下 —— 右下コーナーの半径。
• 左下 —— 左下コーナーの半径。
• 単位 —— pxで固定サイズ、%で流体形状。
• 全コーナーを連動 —— 4つすべてを一緒に動かして均一な丸みを作ります。

使い方

1. 単位（px または %）を選びます。
2. コーナースライダーをドラッグして半径を設定します。
3. 全コーナーを連動のチェックを外すと各コーナーを個別に設定できます。
4. CSSをコピーをクリックしてスタイルシートに貼り付けます。

よくある質問

完全な円はどう作る？ 正方形の要素で4つのコーナーすべてを50%に設定します。完全な円には要素の幅と高さが等しい必要があります。

pxと%の違いは？ pxは要素サイズに関係なく固定半径を与えます。%は要素の寸法に対して相対的に半径を計算するため、要素がリサイズされても同じ値が適応します。

CSSコーナーの順序は？ 4値構文は左上から時計回り：左上 右上 右下 左下。