Border Radiusジェネレーター
角丸や有機的なシェイプを自在に作成
Preview
CSS Code
実際の使用例
完全な円
正方形の場合
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アニメーションで変化させることで、ぷるぷると動くようなエフェクトを作ることができます。