CSS 角丸ジェネレーター

機能

• 四隅を個別に調整でき、プレビューが即座に反映
• px・rem・% の三種類の単位
• 四隅が同じときは一つの値に省略 —— 手書きの CSS と同じ形になります
• 単位を % にすると楕円になることがそのまま見えます
• 値は丸め処理済み：負の値は 0、大きすぎる値は 999 で止まり、無効な CSS を出しません
• 下にそのままコピーできる CSS ルール（`.rounded` セレクター付き）
• コードはシンタックス ハイライト付きで、コピーはボタン一つ
• 計算はすべてブラウザー内で完結し、何も送信されません

使い方

1. 単位を選びます（通常は px か rem）
2. 四隅の値を入れると、プレビューがすぐ変わります
3. % の挙動を見たいときは単位を % に。楕円になる点にご注意ください
4. 良ければコピー ボタンで CSS を取り出します

よくある質問

50% にしても円にならないのはなぜですか？

`border-radius` の % は縦横それぞれで解決されるからです —— 横は要素の幅に対する割合、縦は高さに対する割合です。要素が正方形でなければ二つの半径は異なり、結果は楕円になります。真円にする方法は二つ：要素自体を正方形（幅と高さを等しく）にして `50%` を使うか、短辺の半分を超えるピクセル値（`9999px`）を書いてブラウザーに短辺の半分へ丸めさせるかです。後者はカプセル形状を作る定番の書き方でもあります。

四つの値はそれぞれどの角ですか？

左上から時計回りです：`border-radius: 左上 右上 右下 左下`。三つの値なら「左上、右上と左下、右下」、二つなら「左上と右下、右上と左下」、一つなら四隅すべてです。本ツールは四隅が同じときは一つ、異なるときは四つの値を出力します —— CSS 自身の省略規則と同じなので、出力は手書きのコードと同じ見た目になります。

カプセル ボタンに `9999px` を使うのは安全ですか？

安全で、よく使われる方法です。ブラウザーは半径を短辺の半分に丸めるため、ボタンの高さがいくつであっても `9999px` は完全な半円の端になります。`50%` より堅牢です —— 後者は縦横比によって形が変わり（楕円になることもあります）、`9999px` は常にカプセルです。代償は数値が大げさに見えることだけです。

角丸は性能に影響しますか？

角丸そのものはほとんど影響しません。 一点だけ注意すべきは、アニメーション中の要素に角丸を付けるとクリップ処理が一段増え、低スペック端末でフレーム落ちすることがあります。アニメーション中に角丸が変わらないなら、再描画されない親要素に移す手があります。GPU 合成下では `border-radius` は安価で、ほとんどの場合に構造を変える必要はありません。