CSSボーダーラジアス生成 - 無料オンラインツール

機能

4 つの角を個別に調整

一括モードと個別モード

スライダーと数値入力に対応

プレビューと CSS を同時表示

使い方

1. 半径スライダーをドラッグすると、ステージのカードが実寸で角丸をプレビューします。

2. 「角ごと」に切り替えると各コーナーを個別に調整できます。

3. CSS をコピーします — 最短の記法で出力されます。

このツールについて

角丸は CSS 1行で書けますが、実際の見た目を確認しながらのほうが適切な値を選べます。このジェネレーターはニュートラルなカードで border-radius を実寸表示し、スライダー1本でまとめて、または角ごとに個別に調整できます。そして最も短い有効な宣言を書き出します。4つの角が同じなら値は1つ、異なる場合は左上・右上・右下・左下の順に2～4つの値を使います。4～8px の小さな角丸はボタンや入力欄に、12～24px はカードに使うと親しみやすく、非常に大きな値にすると背の低い要素がピル型になります。CSS をコピーする前にステージの背景を切り替えて、明るい面と暗い面でどう見えるか確認できます。

よくある質問

border-radius の4つの値はどの順番ですか？

左上から時計回りに、左上・右上・右下・左下の順です。値が2つの場合、1つ目は左上と右下、2つ目は右上と左下に適用されます。

ピル型のボタンや円を作るには？

ピル型にするには要素の高さの半分以上、または 9999px のような非常に大きな値を指定します。円にするには幅と高さを同じにして、border-radius を 50% にします。

角丸の部分が切れたり背景が見えたりするのはなぜですか？

子要素が角丸の外にはみ出している可能性があります。コンテナに overflow: hidden を付けるか、子要素にも同じ角丸を指定すると、画像や背景が曲線に沿って表示されます。

楕円形の角も作れますか？

CSS では border-radius: 50% / 20% のようにスラッシュで水平方向と垂直方向の半径を別々に指定できます。このジェネレーターは多くの UI 作業をカバーするピクセル単位の円形の角に絞っているので、特殊な形はスラッシュ構文を手で追加してください。

border-radius はレイアウトやクリック範囲に影響しますか？

影響しません。要素の描画と切り抜きが変わるだけで、レイアウト上は長方形のボックスのままです。透明になった角の部分をクリックしても、その要素へのクリックとして扱われます。

CSSボーダーラジアスジェネレーター

機能

使い方

このツールについて

よくある質問

関連ツール