CSS角丸ジェネレーター（border-radius）
CSS角丸ジェネレーターで、四隅の丸みをまとめて、または角ごとにピクセルやパーセントで調整できます。横と縦の半径を別々に指定すれば楕円の角丸にもなります。値はいちばん短い正しい書き方で出力され、4つの個別プロパティも一覧表示。さらに、指定したボックスサイズでブラウザが実際に使う半径も計算します。
計算方法
border-radiusとは
border-radiusは、要素の角を丸くする（角丸にする）CSSプロパティです。読み方は「ボーダーラディウス」。1〜4個の値を左上・右上・右下・左下の順（時計回り）に指定し、省略した値はmarginと同じルールで補われます。
| 値 | 意味 |
|---|---|
12px | 四隅すべて12px |
24px 8px | 左上と右下が24px、右上と左下が8px |
24px 8px 4px | 左上24px、右上と左下8px、右下4px |
12px 12px 0 0 | 上だけ角丸（左上と右上が12px） |
40px 10px / 20px 5px | 楕円：スラッシュの前が横、後ろが縦の半径 |
このツールは入力をいちばん短い同じ意味の書き方に直します。10px 10px 10px 10pxは10pxになり、前後が同じ値のスラッシュは省かれます。
パーセント：幅と高さは別々に計算
パーセントは、横方向はボックスの幅、縦方向は高さを基準に計算されます。そのためborder-radius: 50%は正方形を円にしますが、240 × 160pxの長方形では横120px・縦80pxの半径の楕円になります。長方形で正円の角丸にしたい場合はピクセルで指定します。
曲線が重なるとき
隣り合う2つの半径の合計が、共有する辺の長さを超える場合、W3Cの仕様では、ブラウザはすべての半径を同じ係数 f = min（辺の長さ ÷ その辺の2つの半径の合計）で縮小します。
ピル型（カプセル型）ボタンの例：200 × 40pxのボタンにborder-radius: 9999pxを指定すると、左右の辺では高さ40pxに対して9999 + 9999 = 19,998px。f = 40 ÷ 19,998 ≈ 0.002となり、各角は9999 × f = 20px、ちょうど高さの半分になります。両端がきれいな半円になるのはこのためです。「使われる半径」の欄に、ボックスサイズに合わせた実際の値が表示されます。
よくある質問
CSSで円を作るには？
正方形の要素にborder-radius: 50%を指定します。長方形に50%を指定すると楕円になるので、両端が丸いピル型のボタンには9999pxのような大きなピクセル値を使います。
上だけ角丸にするには？
border-radius: 12px 12px 0 0のように、左上と右上だけに値を入れます。個別にborder-top-left-radiusとborder-top-right-radiusを指定しても同じです。
border-radiusが効かないのはなぜですか？
よくある原因は、中の画像や子要素が角からはみ出していることです。親要素にoverflow: hiddenを指定するか、画像（img）自体にborder-radiusを指定します。表（table）ではborder-collapse: collapseだと角丸にならないため、separateにします。背景も枠線もない要素は、角丸になっていても見た目では分かりません。
border-radiusのスラッシュは何を意味しますか？
横の半径と縦の半径を分けています。40px / 20pxは、各角を幅40px・高さ20pxの楕円の4分の1で丸めます。スラッシュの前後にそれぞれ最大4個、合計8個の値を指定できます。
指定したより角丸が小さくなるのはなぜですか？
そのままでは曲線が重なってしまうためです。この場合ブラウザは、単独なら収まる角も含めて、すべての半径を同じ割合で縮小します。このツールでは係数と実際に使われる半径を確認できます。
4つの値はどの順番で書きますか？
左上、右上、右下、左下の順で、左上から時計回りです。個別プロパティはborder-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radiusです。
出典・根拠
- css-backgrounds-3, § 4.1: W3C – CSS Backgrounds and Borders Module Level 3: the border-radius properties
- css-backgrounds-3, § 4.5: W3C – CSS Backgrounds and Borders Module Level 3: Overlapping Curves
- MDN Web Docs – border-radius
更新日：
関連ツール
- CSS box-shadowジェネレーターCSSのbox-shadowをスライダーで作成。複数の影、オフセット、ぼかし、広がり、透明度付きの色、inset、プリセットに対応し、プレビューを見ながらCSSをコピーできます。
- CSSグラデーション ジェネレーターCSSグラデーションを作成。線形・円形・扇形に対応し、カラーストップと角度を自由に設定。プレビューを見ながら、そのまま使えるCSSをコピーできます。
- カラーコード変換：HEX・RGB・HSL・HSV・CMYKカラーコードを変換します。HEXからRGB、RGBからHEX、HSL・HSV・HWB・CMYKへ一括変換。どの形式で入力しても自動で判別し、結果はコピーできます。
- Base64エンコード・デコードBase64・Base64urlのエンコードとデコードをUTF-8で正しく変換。日本語も文字化けしません。URLエンコード・デコードにも対応した無料ツールです。
- DNSレコード確認（nslookupオンライン）ドメインのDNSレコードをオンラインで確認。A、AAAA、MX、TXT、CNAME、NS、SOA、CAA、SRV、PTRをTTL・DNSSECの状態・エラーコードの解説付きで表示します。
- EU VAT番号チェック（形式・チェックデジット）EUのVAT番号（付加価値税の登録番号）の形式とチェックデジットを、加盟27か国と北アイルランド（XI）について確認できます。ブラウザ内で処理し、公式確認はVIESへ。