Developer Toolsボーダー半径ジェネレーター
独立したコーナーコントロールで複雑な CSS border-radius の形状を視覚的に作成。リアルタイムプレビューとすぐに使えるCSSコードのワンクリックコピー。
コーナー設定
単位:
プレビューとCSSコード
border-radius: 8px
省略形
.element {
border-radius: 8px;
}詳細形
.element {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}関連ツール
ボーダー半径ジェネレーターについて
使い方
- スライダーまたは数値入力で各コーナーを調整する
- 「すべてのコーナーをリンク」で4つのコーナーを同時に制御する
- 固定サイズか相対サイズかに応じて単位（pxまたは%）を選択する
- プリセットを使って円、ピル、スクエアなどの一般的な形状を即座に適用する
- プレビュー背景と要素の色をカスタマイズしてリアルな表示にする
- 生成されたCSSの省略形または詳細形をワンクリックでコピーする
一般的な使用例
- 角丸のボタン、カード、入力フィールドのデザイン
- UIデザインでのピル形状のタグやバッジの作成
- border-radius 50%による円形アバターやアイコンの作成
- クリエイティブなレイアウトのためのユニークな非対称形状の生成
- コーナーを精密に制御したUIコンポーネントのプロトタイプ作成
- CSS border-radius の値の学習と実験
よくある質問
CSS border-radius とは何ですか？
CSS border-radius は要素のボーダーボックスの角を丸める属性です。左上、右上、右下、左下の角の半径を定義する1〜4つの値を受け取ります。
ボーダー半径ジェネレーターの使い方は？
スライダーまたは数値入力で各コーナーを独立して調整します。ライブプレビューが即時更新され、生成されたCSSコードをワンクリックでコピーできます。
各コーナーに異なる値を設定できますか？
はい。「すべてのコーナーをリンク」をオフにすることで、各コーナー（左上、右上、右下、左下）を独立して制御し、非対称な形状を作成できます。
CSSの省略形と詳細形の違いは何ですか？
省略形の border-radius は4つのコーナーをまとめて設定します。詳細形のプロパティ（border-top-left-radius など）は各コーナーを個別に設定します。
CSS border-radius で円を作るには？
正方形の要素に border-radius を 50% に設定します。このツールの「円」プリセットを使うと即座に適用できます。
ピル/カプセル形状を作るには？
非常に大きな値（例：9999px）に border-radius を設定するとピル形状になります。「ピル」プリセットをワンクリックで適用できます。
border-radius はパーセント値をサポートしていますか？
はい。パーセント値は要素の寸法に対して相対的です：正方形の要素では 50% で円形になります。このツールはpxと%の両方の単位をサポートしています。
border-radius の省略形で2つの値を指定するとどうなりますか？
2つの値の場合、最初の値が左上と右下のコーナーに、2番目の値が右上と左下のコーナーに適用されます。
生成されたCSSはすべてのブラウザに対応していますか？
はい。border-radius プロパティはすべての最新ブラウザとInternet Explorer 9+でサポートされています。
背景色で形状をプレビューできますか？
はい。ライブプレビューではカスタマイズ可能な背景色で形状が表示され、角丸の見た目を正確に確認できます。
デフォルト値にリセットするには？
「リセット」ボタンをクリックすると、すべてのコーナーが8pxに戻ります。これはほとんどのUIフレームワークで使用されるデフォルト値です。
どんなプリセットが使えますか？
一般的な形状のプリセットが含まれています：スクエア（0px）、スライト（4px）、ラウンド（8px）、エクストララウンド（16px）、ピル（9999px）、円（50%）。