⬜
Border Radiusジェネレーター
CSS border-radiusを視覚的に生成します
border-radius: 16px;Border Radiusジェネレーターは、CSS border-radiusプロパティを視覚的に編集し、矩形要素を円形、楕円、ピル型、有機的なブロブ形状などさまざまな形に変形できるツールです。各コーナーを個別に調整したり、リンクして一括調整したりでき、プリセットを使えばよく使う形状を瞬時に適用できます。ボタン、カード、アバター画像などあらゆるUI要素に最適なラウンド値を見つけましょう。
📖 使い方
- 各コーナーの丸みを個別に調整してください
- コーナーをリンクで同時に調整できます
- プリセットで素早く適用できます
- CSSコードをコピーして使用してください
✨ 主な機能
- ✓各コーナー個別調整
- ✓コーナーリンクオプション
- ✓様々なプリセット提供
- ✓リアルタイムプレビュー
- ✓CSSコード自動生成
💡 活用事例
- •UIデザイナー: デザインシステムのコンポーネント（ボタン、カード、入力フィールド）に一貫したborder-radius値を定義します。
- •フロントエンド開発者: ユーザーアバターを円形に、タグ要素をピル型にスタイリングするCSSを素早く生成します。
- •Webパブリッシャー: さまざまなコーナー値の組み合わせをリアルタイムで比較して最適なUIを実現します。
- •CSSアーティスト: 非対称のborder-radiusを活用して有機的でユニークなブロブ形状を作成します。
- •デザイン入門者: border-radiusの省略記法（4値）と完全記法（スラッシュ付き8値）の違いを視覚的に理解します。
🎯 活用ヒント
- ▸50%を入力すると正方形は円に、長方形は楕円に変わります。
- ▸ピル型ボタンは要素の高さの半分の値（例：高さ40pxなら20px）をborder-radiusに設定します。
- ▸各コーナーに異なる大きな値（例：30% 70% 70% 30% / 30% 30% 70% 70%）を入力すると有機的なブロブ形状を作れます。
- ▸カードUIには8〜16pxのborder-radiusがモダンな印象を与えます。
- ▸overflow: hiddenと組み合わせると子要素も丸いコーナーに合わせてクリップされます。
❓ よくある質問
Q. 完全な円を作るには？
A. 50%を入力すると正方形要素が円になります。
Q. ブロブ形状はどう作りますか？
A. 各コーナーに異なる値を入力すると有機的なブロブ形状を作れます。プリセットを参考にしてください。
Q. border-radiusのスラッシュ（/）は何を意味しますか？
A. スラッシュの前の値は水平半径、後の値は垂直半径を表します。例えば border-radius: 50% 50% / 60% 40% は水平と垂直の丸みが異なる楕円形を作ります。
Q. border-radiusとclip-pathの違いは？
A. border-radiusはコーナーを丸くするのに最適化されており、clip-pathは三角形やポリゴンなどより複雑な形状を作れます。丸いコーナーにはborder-radiusの方がパフォーマンスと使いやすさの面で優れています。
Q. 画像にborder-radiusを適用できますか？
A. はい、imgタグに直接border-radiusを適用するか、コンテナdivにborder-radiusとoverflow: hiddenを設定すると画像を円形や角丸長方形にできます。