CSS border-radiusプレビューの無料オンラインツール。各角を個別調整し、リアルタイムで確認。コードコピー可能。ブラウザ処理。
Ctrl+D を押してこのページをブックマークしてください
ボーダーラジアスプレビューは、CSSのborder-radiusプロパティを視覚的に調整する無料オンラインツールです。 4つの角を個別または一括で設定しリアルタイムプレビューで確認します。 円、楕円、非対称形状も作成できます。 ブラウザ処理、無料。
正方形の要素にborder-radius: 50%を適用すると完全な円になります。4つの角すべてを50%に設定してください。
はい、border-radiusはtop-left、top-right、bottom-right、bottom-leftの順に4つの値を個別設定できます。これにより独特な非対称形状を作れます。
ボタンは6〜12px、カードは8〜16pxの範囲がほとんどのインターフェースで無難です。絶対値より大切なのは要素どうしの一貫性で、同じ画面でボタンと入力欄の角丸が異なると雑然とした印象になります。カードの中に画像が入る場合は、内側の要素の半径を外側より少し小さくしないと、2つの曲線がずれて見えます。
50%は各辺の半分を半径にするという意味なので、要素が正方形でなければ横と縦の半径が異なり楕円になります。本当の円にするにはwidthとheightを同じ値にするか、aspect-ratio: 1 を併せて指定してください。ボタンのように文字数で幅が変わる要素をカプセル型にしたい場合は、50%ではなく9999pxのような大きな固定値を与えると、高さに合わせて両端が常に半円になります。