border-radius生成ツール
ピクセルまたはパーセントで各角を個別に制御できるCSS border-radius生成ツールです。リアルタイムプレビューとコピー可能なコードを提供します。
生成CSS
CSS
border-radius: 12px;
使い方
このborder-radius生成ツールは、ピクセルまたはパーセント単位でCSS border-radiusの各角を個別に制御できます。リアルタイムプレビューと正確なCSSコードを表示します。4つの角を連動させて均一な丸みを適用したり、連動を解除して各角を個別に調整したりできます。
- 単位の選択
固定サイズのカーブにはピクセル、要素に合わせて拡大縮小するカーブにはパーセントを使用してください。
- 各角の設定
スライダーをドラッグするか、数値を直接入力してください。連動を解除すると各角を個別に調整できます。
- CSSをコピー
各角の値が一致すると、ショートハンドは自動的に短縮されます。
border-radiusのショートハンド
border-radiusプロパティは最大4つの値を受け付けます。順序は常に以下の通りです。
border-radius: top-left top-right bottom-right bottom-left;
4つの角すべてが同じ値の場合、ブラウザは単一の値を受け付けます。左上と右下が等しく、右上と左下が等しい場合は2つの値で十分です。このツールは有効な最短の形式を自動的に出力します。
ピクセルとパーセントの違い
- ピクセル: 要素のリサイズに関係なく一定のサイズを保つ固定のカーブです。
- パーセント: 水平半径は要素の幅に対する割合、垂直半径は高さに対する割合となるため、カーブはボックスに合わせて拡大縮小します。正方形の要素で50%に設定すると、4つの角が中心で接し、形状は円になります。
半径が重なる場合
同じ辺を共有する2つの角の半径の合計がその辺の長さを超える場合、ブラウザは両方を比例的に縮小して正確に収まるように調整します。これにより、幅の広い要素に大きなピクセル値の半径を設定しても、追加のCSSなしで両端が完全に丸いカプセル型になります。
ブラウザ対応状況
border-radiusは、各軸ごとの独立したパーセント値も含め、現在のすべてのブラウザで動作します。-webkit-border-radiusのような古いCSS3ベンダープレフィックスは不要です。
よくある質問
CSSで各角に異なるborder-radius値を設定するにはどうすればよいですか?
border-radiusショートハンドは、左上、右上、右下、左下の順に最大4つの値を受け付けます: border-radius: 12px 8px 20px 4px;。このツールで「すべての角をリンク」をオフにし、各スライダーまたは数値フィールドを個別に設定してから、完全な4値構文を使用した生成済みCSSをコピーしてください。
CSSのborder-radiusで円を作成するにはどうすればよいですか?
幅と高さが等しい要素にborder-radius: 50%を設定してください。「プリセット」パネルには「円」オプションがあり、4つの角すべてを50%に設定し、プレビューを正方形にして明確に表示します。生成されるCSSは単にborder-radius: 50%;であり、これを100×100ピクセルの要素に適用すると完全な円になります。
border-radiusにおけるpx単位とパーセント単位の違いは何ですか?
ピクセル値は要素のサイズに関係なく固定の角丸を設定するため、ボックスのサイズ変更時も一定の丸みを維持します。パーセント値は要素自体の幅と高さに相対的なため、同じパーセントでも小さなボタンと大きなカードでは異なる見た目になります。スライダー上部のpxとパーセントの選択で単位を切り替えてください。
「すべての角をリンク」スイッチはどのように機能しますか?
「すべての角をリンク」がオンの場合、いずれかのスライダーを動かすと4つの角すべてが同じ値に更新されます。これはカードの角のような均一な丸みに便利です。オフにすると各角を個別に調整できます。プリセットを適用すると、結果を微調整できるようリンクは自動的にオフになります。
大きな半径が予想より小さく見えることがあるのはなぜですか?
同じ辺上の隣り合う2つの角の半径の合計がその辺の長さを超える場合、ブラウザは両方を比例的に縮小し、辺の中央で曲線が正確に接するようにします。横長で背の低い要素の場合、これにより通常のピクセル値から完全に丸みのあるピル型が作成されます。このツールのPillプリセットがその例です。