⬜ 角丸生成器

角丸生成器について

この角丸生成器は、すべてブラウザ内で完結します。4つの角それぞれの水平・垂直半径を個別に調整するか、楕円モードを有効にしてより複雑な形状を作成できます。生成されたCSSコードをプロジェクトに直接コピーできます。

border-radiusの仕組み

• シンプルな角丸 —— 楕円モードがオフの場合、各角は単一の値を使用します。CSSは左上・右上・右下・左下の4つの値を使用します。
• 楕円角丸 —— 有効にすると、各角に個別のX・Y半径があり、楕円曲線を作成します。CSSはスラッシュ区切りの4/4形式を使用します。
• 角ごとの制御 —— 8つのスライダーすべてで、両方向の各角に異なる半径を設定できます。

生成器の使い方

1. 8つのスライダーを調整して各角のX・Y半径を設定します。
2. 楕円角丸をオンにしてCSS出力で個別のX/Y制御を有効にします。
3. プレビューボックスがリアルタイムで更新されます。
4. CSSをコピーをクリックして生成されたコードをコピーします。

よくある質問

シンプルと楕円の違いは？ シンプルは各角に1つの値（円弧）を使用します。楕円は各角に個別のX・Y値を使用し、楕円形の曲線を可能にします。

円を作成できますか？ はい——すべての値を50%（またはpx単位でボックスサイズの半分）に設定すると、完璧な円や楕円になります。

border-radiusはどこでもサポートされていますか？ はい、border-radiusはモバイルを含むすべてのモダンブラウザでサポートされています。