無料オンラインCSSボーダーラジウスジェネレーター
CSSボーダーラジウスを視覚的に生成。4つの角を独立して制御。
Who uses the CSSボーダーラジウスジェネレーター?
- デザインシステムのコンポーネント用に border-radius の値を生成するフロントエンド開発者。
- 適切な視覚的重みを得るために角の丸みのオプションをテストする UI デザイナー。
- インタラクティブな可視化を通じて border-radius プロパティを学ぶ CSS 初心者。
How the CSSボーダーラジウスジェネレーター works
スライダーを使って4つの角それぞれの半径を個別に調整します。
「Link all corners」をオンにすると、4つのスライダーが連動し、均一な丸みを作れます。
サンプルカード要素でプレビューをリアルタイムに確認します。
生成された CSS の border-radius 値をコピーして、そのままスタイルシートに使用します。
Tips & tricks
- 「Link all corners」のチェックを外すと非対称な角が作れます——吹き出しやタブ風の形に便利です。
- 生成される CSS は各角につき1つの半径値のみを使います（border-radius: TL TR BR BL）——楕円形のコーナーが必要な場合は、コピーした値をスラッシュ構文で手動編集してください。
- CSS 省略記法での角の順序は常に左上から時計回りです——このツールのスライダーのラベル順もこれに一致しています。
- 小さな要素に非常に大きな半径値を使うと、各角が中央で出会った時点で見た目の変化は頭打ちになります。
Frequently Asked Questions
CSS border-radius の省略記法は？
1値: border-radius: 8px（全ての角が同じ）。4値: border-radius: 10px 20px 30px 40px（左上、右上、右下、左下の順、時計回り）。2値: border-radius: 10px 20px（左上+右下、右上+左下）。
CSS で完全な円を作るには？
正方形の要素（幅と高さが等しい）に border-radius: 50% を設定します。正方形でない要素では 50% は楕円になります。円を作るには、幅と高さが等しい div に border-radius: 50% を使ってください。
楕円形のコーナー半径とは？
CSS の border-radius は8値構文を使うと各角に水平・垂直それぞれ別の半径を指定できます：border-radius: 10px 40px / 40px 10px で有機的な「ブロブ」形状が作れます。このツールはこの構文を生成しません——各角につき1つの半径値のみをコントロールします。
border-radius で有機的な「ブロブ」形状を作れますか？
はい、CSS のフル8値構文（各角ごとに異なる水平・垂直半径）を手書きすれば可能です。このツールがカバーするのはより一般的な「角ごとに単一の半径」というケースです。楕円形/ブロブ形状が必要な場合は、border-radius の値を直接手で編集してください。
典型的な「カード」の丸みにはどんな値がいいですか？
4〜8pxは控えめなカードの標準値です。12〜16pxはモダンなUIカードでよく使われます。24px以上は「ピル」や「タグ」風の要素に使われます。小さなカードで50に近い値を使うと、過度に丸くなり始めます。
Is my data safe when using the CSSボーダーラジウスジェネレーター?
Completely safe. The CSSボーダーラジウスジェネレーター processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the CSSボーダーラジウスジェネレーター output in commercial projects?
Yes. The CSSボーダーラジウスジェネレーター is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the CSSボーダーラジウスジェネレーター follow official standards?
Yes. The CSSボーダーラジウスジェネレーター is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.