CSS 角丸ジェネレーター（border-radius）

このツールでできること

角丸ジェネレーターでは、角の丸みを視覚的に調整し、最短の CSS をコピーできます。すべての角に同じ半径を設定することも、角ごとに設定することもできます。楕円の角をオンにすると各角に横と縦の半径を別々に指定でき、ドラッグに合わせてプレビューが変化します。px・%・rem・em に対応し、既存の border-radius の値を貼り付けて編集することもできます。処理はすべてブラウザ内で行われます。

使い方

1. プリセットから始めるか、サンプルの形をそのまま使います。
2. 単位 を選びます。単位を切り替えると現在の値が換算されます（rem と em は 16px、% はプレビューのボックス基準）。
3. すべての角を同じにする をオンにするとスライダー 1 本で調整でき、オフにすると 左上・右上・右下・左下 を個別に設定できます。
4. 楕円の角 をオンにすると、各角に 横 と 縦 のスライダーが表示されます。
5. 幅 と 高さ でプレビューの大きさを変え、CSS カードからコードをコピーします。4 つの個別プロパティがよければロングハンド出力をオンにします。

例

.avatar { border-radius: 50%; }
.tab    { border-radius: 12px 12px 0 0; }
.blob   { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }

知っておくと便利なこと

• 最短の書き方。 同じ値はまとめて出力されます。4 つの角が同じなら値は 1 つになり、すべての角が円弧ならスラッシュ以降は省略されます。
• パーセンテージはボックス基準。 横のパーセンテージは要素の幅、縦は高さに対する割合なので、長方形に 50% を指定すると円ではなく楕円になります。
• 収まらない半径 はブラウザがまとめて縮小します。大きな px 値できれいなピル型になるのはこのためです。
• 子要素とはみ出し。 角丸は背景と枠線を切り抜きますが、子要素の中身は切り抜きません。ボックス内の画像を切り抜くには overflow: hidden を追加します。