Border Radiusジェネレーター
角丸や有機的なシェイプを自在に作成
Preview
CSS Code
Border Radiusジェネレーターの使い方
角の丸みを視覚的に調整し、CSSコードを生成します。
1
モード選択
「シンプルモード（通常の角丸）」か「ファンシーモード（有機的な歪んだ形）」を選択します。
2
各コーナーの調整
スライダーを動かして、4つの角（左上、右上、右下、左下）の丸みを個別に設定します。
3
コードのコピー
プレビューで確認したシェイプのCSSコードをコピーして、自分のサイトに貼り付けます。
実際の使用例
完全な円
正方形の場合
INPUT
All 50%
OUTPUT
border-radius: 50%;
有機的な形
ランダムな曲線
INPUT
Fancy Mode
OUTPUT
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
よくある質問
「/」で区切られた値は何ですか？
border-radiusの拡張構文です。スラッシュの前が水平方向の半径、後ろが垂直方向の半径を表します。これにより、完全な円弧ではない歪んだ楕円形の角を作ることができます。
全角統一で設定したい場合は？
シンプルモードで、スライダーを全て同じ値にするか、リンクボタン（現在は未実装ですが今後の予定）で連動させると簡単です。
役立つTips
アバター画像の装飾
ファンシーモードで作った有機的な形（Blob Shape）をプロフィール画像の枠として使うと、柔らかく親しみやすい印象を与えられます。
アニメーションとの組み合わせ
border-radiusの値をCSSアニメーションで変化させることで、ぷるぷると動くようなエフェクトを作ることができます。