CSS border-radiusジェネレーター

値を入れると、実際のボックスでの描画結果まで確認できるジェネレーター

CSS border-radiusジェネレーターは、4つの角の半径を決めてborder-radiusのコードを作り、その値が実寸のボックスでどう描画されるかを一緒に表示します。幅320px、高さ200pxのカードにborder-radius: 16px;を指定すると、4つの角が半径16pxの四分円で丸くなります。水平半径と垂直半径を別々に指定すれば、border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;のようにスラッシュ(/)を使った楕円の角も作れます。

角の入力欄に数値を入れるか、ステージのレールにあるハンドルをドラッグすると、形とコードが同時に変わります。半径が大きすぎて隣り合う曲線が重なると、ブラウザはすべての半径を同じ比率で縮めて描画します。このツールは縮んだ後の値をガイド線と辺チェックバーで示し、「縮小後の値に置き換え」を1回押すだけで入力欄の数値を画面に合わせられます。同じ値をボタン・タグ・入力欄・カード・写真・アイコンのサイズに当てた例を確認でき、カード内の写真に付ける内側の半径も計算します。

数値だけで決めるとずれる理由

同じ24pxでも、高さ44pxのボタンなら両端が半円のピル形になり、大きなカードでは少し丸いだけの角になります。パーセントはボックスの幅と高さをそれぞれ基準にするため、正方形でなければ円ではなく楕円の角になります。そのため半径は数値よりも「どのサイズのボックスに付けるか」を先に見る必要があり、このツールがボックスサイズと実際の要素のプレビューを並べて置いているのもそのためです。

• デザインシステムの角の段階を決めるとき: ボタン8px、カード16pxのように値を決める前に、同じ値がボタン・タグ・カード・写真でどう見えるかを1画面で比べます。
• デザインカンプの値をコードに移すとき: カンプのボックスサイズをそのまま入力して角の値を合わせれば、ブラウザが縮めて描画するケースをコードに貼る前に把握できます。
• ピルボタンや丸い写真を作るとき: 9999pxと50%が、どのボックスで同じ形になり、どのボックスで違う形になるかを確認します。
• しずくやブロブのような有機的な形が必要なとき: スラッシュ付きの8つの値を手で合わせるのは大変です。例から始めてハンドルで整えるとスムーズです。
• カードの中に写真やボタンを入れるとき: 内側の要素に外側と同じ値を付けると、角のすき間が太く見えます。余白を入れれば、合う内側の半径をすぐに計算します。

使い方

1. 「形を選ぶ」から近い形を選ぶか、ボックスの幅と高さを実際に使うサイズで入力します。
2. 単位(px・%)と半径の方式(円形・楕円)を選びます。楕円を選ぶと、角ごとに水平(↔)と垂直(↕)の入力欄が現れ、ステージの左右に垂直半径のレールが表示されます。
3. 4つの角の入力欄に数値を入れるか、レールのハンドルをドラッグします。ハンドルにフォーカスして矢印キーを押すと1ずつ、Shiftを押しながらだと10ずつ変わります。「4つの角を連動」をオンにすると、1つの角を変えるだけで残りも追従します。
4. 辺チェックバーがオレンジ色になったら、その辺の半径の合計が辺より長く、ブラウザが縮めて描画するという意味です。画面どおりの数値が必要なら「縮小後の値に置き換え」を押します。
5. 「実寸で確認」で他の要素でも問題ないか見てから、「CSSをコピー」でコードを持ち帰ります。1行形式と角ごとのプロパティ、pxとremから形式を選べ、「リンクをコピー」は現在の設定をURLに含めます。

値の順序と省略記法

border-radiusの値は、左上から時計回りに右上、右下、左下の順に対応します。値を少なく書くと、足りない角はすでに書いた角の値を引き継ぎます。左下が省かれると右上と同じになり、右下が省かれると左上と同じになり、右上まで省かれると左上と同じになります。

2つの値を書くと、上下ではなく対角同士がペアになります。スラッシュの前の値は水平半径、後ろの値は垂直半径で、どちらも同じ省略規則に従います。1つの角だけを変えるときはborder-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radiusを使い、ここではスラッシュを使わずに40px 20pxのように水平・垂直をスペースで区切って書きます。このツールの「1行」コードは同じ値を可能な限り短くして出力し、「角ごと」は4つのプロパティを個別に出力します。

pxと%は描画がどう違うか

pxの半径は、ボックスのサイズに関係なく同じ長さです。%の半径は、水平半径がボーダーボックスの幅を、垂直半径が高さを基準に計算されます。同じ10%でも、幅300px、高さ180pxのカードでは水平30px、垂直18pxの楕円の角になります。下の表は、同じ値を3種類のサイズに当てたときにブラウザが実際に描画する半径(水平 × 垂直)です。

サイズの違う要素に同じ丸みを付けたいならpx、ボックスのサイズに比例した曲線が必要なら%が向いています。このツールで単位を切り替えると、いま描画されている形がそのまま保たれるよう値を再計算します。正方形でないボックスでpxを%に切り替えると、水平と垂直の値が異なるため、楕円の半径に変わります。

大きな値を入れても丸くならない理由

仕様では、辺ごとにその辺に接する2つの角の半径の合計を辺の長さと比べます。上辺と下辺は水平半径2つの合計を幅と、左辺と右辺は垂直半径2つの合計を高さと比べます。4辺のうち「辺の長さ ÷ 半径の合計」がもっとも小さい値をfとすると、fが1より小さいときは、すべての角の半径にfを掛けて描画します。四分円は四分円のままで、大きな半径は小さな半径より大きいままですが、もともと十分小さかった角も一緒に縮みます。

3行目を見ると、左上の大きな半径のせいで、10pxに決めた他の3つの角が6.25pxに縮んでいます。小さい角を正確に保ちたいなら、大きな半径を辺の長さの範囲内まで下げてください。ピルボタンによく使う9999pxは、この規則を利用した値です。半径が短い辺の半分まで縮むので、高さが変わっても両端はいつも半円になります。

楕円の角とスラッシュ

1つの角は、水平半径と垂直半径を持つ楕円の4分の1です。2つの値が同じなら四分円、違えば片方向に引き伸ばされた曲線になります。border-radius: 50% / 60% 60% 40% 40%;は、水平はすべて幅の半分、垂直は上の2つの角が高さの60%、下が40%なので、上が長い卵形になります。4つの角の水平・垂直の値をすべて変えると、ブロブのような手描き風の形になります。

水平半径と垂直半径のどちらか一方でも0なら、その角は曲線なしの角張った形で描画されます。ただし0でないほうの値は辺の半径の合計にそのまま含まれるため、他の角を縮める原因になることがあります。Chromeで描画しても、仕様どおり他の角が一緒に縮みます。半径に負の値は使えず、負の値を含む宣言は無視されます。

内側の要素の半径: 外側 − 余白

カードの中に写真を入れて四方に余白を取るとき、写真の角はカードより余白の分だけ内側でカーブさせると、2本の曲線のすき間が均等に見えます。仕様でも、同じ考え方でボックスの内側の曲線を決めています。ボーダー内側(padding edge)の半径は、外側の半径からボーダーの太さを引いた値で、コンテンツ領域の半径はそこからさらにpaddingを引いた値です。0より小さくなる場合は0になります。

内側の要素に外側と同じ値を付けると、角の部分のすき間が辺より太くなり、写真が内側に寄って見えます。上の「内側の角を合わせる」で、2つのケースを並べて比べられます。外側が%で指定されていても、内側の値は描画される半径から引いたpxで出力します。

中の写真が角からはみ出すとき

親のボックスに半径を付けても、子要素が自動的に切り取られるわけではありません。仕様では背景は曲線に沿って切り取られますが、子が曲線の外に出ないようにするには、親のoverflowをvisible以外の値(hiddenやclip)にする必要があります。このとき切り取りの基準になるのは、ボーダー内側の曲線です。写真自体に半径を付ける方法もあり、imgのような置換要素は、内容が自身の曲線に沿って切り取られるためです。

半径はクリックできる領域も狭めます。ポインターイベントも丸いボーダーに沿って切り取られるため、44 × 44pxのボタンに50%を付けると、押せる面積は円の面積に当たる約78.5%に減ります。仕様でも、半径を大きくするときは推奨される最小のタッチサイズを守れるよう、幅と高さを十分に確保するよう書かれています。

よく使う形の値

「形を選ぶ」にある12種類の値です。ボックスサイズも合わせて使わないと同じ形になりません。特に%の値は、ボックスの縦横比が変わると形も変わります。

ブラウザ対応と新しいプロパティcorner-shape

border-radiusはかなり前からすべての主要ブラウザが対応しているので、プレフィックスなしで使えます。右から左へ書く、あるいは縦書きのページでは、border-start-start-radiusのような論理プロパティを使うと、書字方向に応じて角が入れ替わります。CSS Borders 4のエディターズドラフトにあるcorner-shapeは、半径が決めた領域の中で曲線の形をround、squircle、bevel、scoop、notch、square、superellipse()のいずれかに変えるプロパティです。まだ実験的機能のためChrome 139以上でしか表示されず、このツールのプレビューはborder-radiusの丸い曲線だけを描画します。

間違えやすい点

• 順序を反時計回りだと思う: 4つの値は、左上 → 右上 → 右下 → 左下の時計回りです。
• 2つの値を上下で読む: 16px 8pxは、左上と右下が16px、右上と左下が8pxです。上だけを丸くするなら16px 16px 0 0を使います。
• 長方形に50%を付けてピル形を期待する: 幅と高さが違うと、50%は楕円になります。両端だけが半円のピル形は、高さの半分以上のpx値か9999pxで作ります。
• スラッシュを角ごとに入れる: 10px / 20px 30px / 40pxのようにスラッシュを2回使うと、宣言全体が無視されます。スラッシュは、水平の値の並びと垂直の値の並びの間に1回だけ書きます。
• 親だけに半径を付けて写真がはみ出す: 親にoverflow: hiddenを付けるか、写真にも半径を付けます。
• 内側の要素に外側と同じ値を付ける: 角のすき間が太くなります。外側の半径から余白を引いた値を使います。
• %の半径の基準が1つだと思う: 水平半径は幅、垂直半径は高さが基準なので、正方形でなければ同じ%でも2つの長さが異なります。

限界と注意点

• 入力できる単位はpxと%です。remは、px値をルートのフォントサイズ16pxで割って表示する出力形式で、emやvwなどの単位は扱いません。
• 半径は小数第1位まで、pxは0〜9999、%は0〜100で、ボックスは幅40〜800px、高さ40〜600pxです。ステージより大きいボックスは縮小して表示し、倍率はステージの左上に表示します。
• ボックスサイズはボーダーを含んだ大きさとして扱います。実際の要素にボーダーやpaddingがあり、box-sizingがcontent-boxの場合、%の半径の基準になるサイズは、入力した幅・高さより大きくなります。
• 仕様では、曲線がスクロールバーなどの画面要素とぶつかる場合、ブラウザがその半径をさらに縮めてよいとされています。その場合、このツールの計算より小さく描画されることがあります。
• 内側の半径は、四方の余白が等しいものとして計算します。左右と上下で余白が違う場合は、水平半径では左右の余白を、垂直半径では上下の余白を引く必要があります。
• corner-shapeはプレビューしません。曲線の縁のなめらかさは、画面の倍率やデバイスピクセル比によって、少し違って見えることがあります。

基準日 W3C CSS Backgrounds and Borders Module Level 3(Candidate Recommendation Draft 2024-03-11)、CSS Borders and Box Decorations Module Level 4(Editor's Draft 2026-10-15)、MDN互換性データ(browser-compat-data 8.1.6)は、2026-10-22に原文で確認しました。表の数値はこのツールの計算コアで求め、重なりの縮小と0の軸の扱いはChromium 151で実際に描画して照合しました。

出典

• 01W3C: CSS Backgrounds and Borders Module Level 3Candidate Recommendation Draft 2024-03-11。§4.1 値の順序・省略・スラッシュ・%の基準・負の値は無効、§4.2 内側の曲線(外側 − ボーダー)、§4.3 曲線に沿った切り取り、§4.5 重なる曲線 f = min(L/S)
• 02MDN: border-radius構文と例、ブラウザ互換性(4つの値は Chrome 4・Firefox 4・Safari 5、%の値は Chrome 8・Firefox 4・Safari 5.1)
• 03W3C CSSWG: CSS Borders and Box Decorations Module Level 4Editor's Draft 2026-10-15。corner-shapeの値 round、scoop、bevel、notch、square、squircle、superellipse()
• 04MDN: corner-shape実験的機能、互換性データは Chrome 139、Firefox・Safari はプレビュー版
• 05MDN: border-start-start-radius書字方向に従う論理的な角のプロパティ、互換性データは Chrome 89・Firefox 66・Safari 15

よくある質問

あわせて使うツール