border-radiusとは？
border-radiusは、要素のborder cornerを丸くするCSSプロパティです。水平半径と垂直半径が同じなら4分の1円、異なれば4分の1楕円として角の形が決まります。どちらかの半径が0なら、その角は丸くならず四角になります。
1～4値の順番
値1つは四隅すべて、2つは「左上・右下」と「右上・左下」、3つは「左上」「右上・左下」「右下」、4つは左上 → 右上 → 右下 → 左下の時計回りです。このツールは同じ値を自動で見つけ、1～4値のうち最短のshorthandへ圧縮します。
border-radius: 10px 20px 30px 40px;スラッシュで楕円角丸を作る
/より前が水平半径、後が垂直半径です。四隅の水平と垂直がすべて同じ場合はスラッシュを省略します。個別プロパティでは1つ目が水平、2つ目が垂直で、2つ目を省略すると1つ目と同じになります。
border-radius: 40px / 20px;
border-top-left-radius: 40px 20px;%は幅と高さで基準が違います
percentageの水平半径はborder boxの幅、垂直半径はborder boxの高さを基準にします。そのためborder-radius: 50%;は正方形なら円、長方形なら楕円になります。
大きすぎる半径はブラウザが表示時に調整
隣り合う角の半径合計がボックスへ収まらない場合、ブラウザはW3C仕様のf = min(Li / Si)に従って、すべてのused radiusを同じ比率で縮小します。これは表示時のused valueの処理であり、ToolPipoが指定CSSを小さい数値へ書き換えることはありません。
対応範囲
このツールはW3C CSS Backgrounds and Borders Module Level 3のborder-radius仕様を基準に、非負のpx・%・rem・em、1～4値shorthand、楕円構文、四隅別longhandを生成します。画像加工、clip-path、corner-shape、borderそのものの編集は行いません。
よくある質問
border-radiusとは何ですか？
要素の角を円弧または楕円弧で丸くするCSSプロパティです。
四隅を全部同じ角丸にするには？
border-radius: 16px;のように1つの値を指定します。
四隅を別々にできますか？
1～4値のshorthandまたは四隅別のlonghandで指定できます。
4つの値はどの順番ですか？
左上、右上、右下、左下の時計回りです。
%も使えますか？
使えます。水平半径はborder boxの幅、垂直半径は高さを基準にします。
border-radius: 50%なら必ず円ですか？
いいえ。正方形なら円、長方形なら楕円になります。
楕円形の角丸は作れますか？
作れます。/で水平半径と垂直半径を分けて指定します。
スラッシュより前と後は何ですか？
前が水平半径、後が垂直半径です。
マイナス値は使えますか？
使えません。border-radiusの負値はCSS仕様上無効です。
大きなradiusを指定するとどうなりますか？
角同士が重ならないよう、ブラウザが表示時の半径を同じ比率で縮小します。指定したCSS文字列自体は変わりません。
9999pxは使えますか？
CSSでは有効な非負lengthで、横長要素のPill形状などに使われます。このツールの数値入力は操作上の安全上限を設け、Pillプリセットでは同じ形になる十分大きな値を使います。
pxと%の違いは？
pxは固定length、%はborder boxの幅または高さを基準にした割合です。
プレビューの幅と高さもCSSへ出力されますか？
いいえ。幅と高さは角丸を確認するためだけの設定です。