⬜ border-radiusジェネレーター
角丸（border-radius）をスライダーで調整して、CSSをリアルタイムに生成・コピーできます。4隅の一括／個別指定、単位 px・% の切替に加え、水平/垂直を別々に指定する8値でブロブ（不定形）も作れます。処理はすべてブラウザ内で完結します。
プレビュー
入力
CSS
border-radius: 24px;
※ 4隅個別モードでは、同じ値が続く隅を省略した最短のショートハンドで出力します（例: 左上・右下=20px、右上・左下=5px なら 20px 5px）。
解説
border-radius は、要素の角を丸くするCSSプロパティです。本ツールは、スライダーを動かすだけで角丸の値を決め、その場でプレビューを確認しながら「border-radius: …;」のCSSを生成・コピーできます。数値を手で書き換えて試行錯誤する手間がなく、狙った丸みをすばやく見つけられます。すべての処理はブラウザ内で完結し、入力内容はどこにも送信されません。
指定モードは3つあります。「一括」は全隅を同じ値にする最も基本的な指定です。「4隅個別」は左上・右上・右下・左下を別々に設定でき、出力時は連続する同じ値を省略した最短のショートハンドに整形します（CSSの順序は左上→右上→右下→左下の時計回り）。例えば左上と右下が20px、右上と左下が5pxなら、4つ書かずに「20px 5px」の2値にまとまります。単位は px と % を切り替えられます。
単位の px は絶対値（画面の実寸）で、% は要素の幅・高さに対する比率です。ここが混同しやすい点で、同じ50%でも要素が正方形なら円に、横長なら楕円のように見えます。プレビューの形を切り替えると、この違いを目で確認できます。ピル形（両端が完全な半円のボタン）を作りたいときは、要素の高さの半分以上の大きな px 値（実務では 9999px などの十分大きな値）を指定するのが定番です。
「ブロブ（不定形）」モードは、border-radius のスラッシュ記法「a b c d / e f g h」を使います。スラッシュの前が各隅の水平（横方向）半径、後ろが垂直（縦方向）半径で、隅ごとに横と縦の丸みを非対称にできます。左右で値をずらすほど、有機的でにじんだような不定形（ブロブ）になります。近年のWebデザインでよく使われる柔らかい図形を、8つのスライダーで直感的に作れます。
よくある質問
border-radius の4値の順番は？
左上→右上→右下→左下の時計回りです。値を省略すると対角がミラーされ、2値なら「左上・右下／右上・左下」、3値なら「左上／右上・左下／右下」を表します。本ツールの4隅個別モードは、この規則で最短のショートハンドに整形して出力します。
全隅を50%にすると必ず円になりますか？
要素が正方形のときだけ円になります。横長・縦長の要素では楕円のように見えます。% は要素の幅・高さに対する比率のため、形が変われば見え方も変わります。プレビューの形を切り替えて確認してください。
px と % はどちらを使うべきですか？
固定の丸み（ボタンやカードの角など）は px、要素サイズに応じて丸みを変えたい・円や楕円にしたい場合は % が向きます。レスポンシブで一定の見た目にしたいなら px、常に「半分だけ丸める」なら 50% が便利です。
ピル形（両端が半円のボタン）はどう作りますか？
要素の高さの半分以上の大きな半径を指定します。高さが変わっても崩れないよう、実務では border-radius: 9999px のような十分大きい値を使うのが定番です。本ツールでは「ピル」プリセットや、横長プレビューで大きめの px を指定すると確認できます。
「ブロブ（不定形）」モードのスラッシュは何ですか？
border-radius はスラッシュで水平半径と垂直半径を分けて書けます。「a b c d / e f g h」の前半4値が各隅の横方向、後半4値が縦方向の丸みです。隅ごとに横と縦を非対称にできるので、有機的な不定形（ブロブ）が作れます。
生成したCSSはどのプロパティに貼ればいいですか？
対象要素のスタイルに、そのまま「border-radius: …;」として貼り付けます。角を丸めた形にはみ出す子要素を隠したい場合は、あわせて overflow: hidden; を指定すると綺麗に収まります。
入力した値はサーバーに送られますか？
送られません。計算・プレビュー・CSS生成はすべてブラウザ内で完結し、内容はどこにも送信されません。オフラインでも利用できます。
コピーしたのに貼り付けできないことがあります。
ブラウザやセキュリティ設定によってはクリップボードへの書き込みが制限される場合があります。その場合は出力欄のCSSを手動で選択してコピーしてください。