CSS Border Radius ジェネレーター - ビジュアル角丸ツール

A このジェネレーターは標準のCSSプロパティを出力します。`--radius: 20px`のようなカスタムプロパティは生成しません。出力コードをスタイルシートに貼り付け、値を`var(--my-radius)`に置き換えてください。ビジュアル調整が目的のツールなので、CSS変数が必要な場合は手動で値を移植してください。所要時間は約30秒です。

A 最近のブラウザでは、角丸はGPUアクセラレーションを使うので、複雑なシャドウやグラデーションより高速です。でも古いスマホにborder-radiusを50個以上並べるとバッテリー消費が激しくなります。フリーランスの開発者が1ページに50個以上の丸いカードを入れて、初めて遅さを実感するケースがあります。格安Android端末なら、要素を30個未満、半径20px以下に抑えましょう。2019年のMoto Gでテストするのが確実です。

A いいえ、キーボードショートカットはありません。リセットボタンをクリックするか、各角を手動で0に戻す必要があります。フリーランスの開発者が10分も角の調整に費やしてからリセットしたいと気づくのを何度も見ました—右上のリセットアイコンをクリックすれば、全フィールドが即座にクリアされます。

A 要素が完全な正方形で、全コーナーを50%に設定した場合のみです。200x200pxのボックスではborder-radius: 50%で真円になります。しかし300x200pxの長方形では50%だと楕円になります — 横と縦の半径が異なるからです。このジェネレーターはライブで表示するので、長方形のボックスでコーナースライダーをドラッグしてみてください。4つのコーナーすべてが50%に達すると、ピル型に変化するのがわかります。これはバグではなく、CSSの計算による正常な動作です。

A まさにそれが「リンク解除」ボタンの役割です。クリックして4つの角を分離し、左上と右下だけを希望の半径に設定し、残りは0にしたままにします。120px幅のボタンで葉っぱ効果を出すなら、対角線上の位置に60pxを試してみてください。滑らかな雫型の輪郭になります。プレビューが即座に更新されるので、スライダーを動かして自然な形になるまで調整しましょう。迷ったら、リセットアイコンですべてゼロに戻せます。

A 古いFirefoxにはサブピクセル丸めのバグがあり、4px未満の角丸はギザギザに見えました。Chromeは同じ値を滑らかに描画します。生成されたコードが悪いわけではなく、ブラウザのレンダリングエンジンが違うだけです。少なくとも6px以上の角丸にすれば差は目立ちません。Firefox ESR 102をサポートする場合だけ`-moz-border-radius`を追加してください。現代のブラウザなら標準プロパティで十分。クライアント向けのデザインでは、私は必ず両ブラウザで確認してから納品しています。

A いいえ。パーセント、ピクセル、リンク解除した角を組み合わせれば、有機的な形を作れます。100pxの要素で左上を100%、右上を20px、下2つを0にすると、傾いた雫型になります。コードを書き出して、凹んだ曲線が必要ならclip-pathと併用しましょう。スライダーのプリセットから試すのが手早いです。ボーダー幅を変えると角丸の見え方が変わる点も見落としがちです。

A はい、ボタンやカードにカーソルを合わせたときのエッジの変化をアニメーション化できます。生成されたCSSコードに 0.3s ease のトランジション時間を追加してください。マウスホバー時に四隅が滑らかに変形します。開始と終了の単位はピクセル同士など必ず一致させてください。単位が異なるとアニメーションの途中で不自然な跳ね返りが発生します。

A このジェネレーターのコードは枠線だけを装飾するため、overflow hiddenを追加しない限り画像ははみ出します。先週の案件でまさにこれにハマりました。CSSのborder-radiusのすぐ下にoverflow: hiddenを書き足してください。これで画像が綺麗に角丸の内側に収まります。サンプル写真を入れて確認してみましょう。