border-radiusの使い方完全ガイド｜1〜4値の順序・px/%の違い・8値でブロブを作る
公開日：2026年9月28日 更新日：2026年9月15日 運営：シルギア（Analyzegear, Inc.） 対象ツール：border-radiusジェネレーター
border-radius は要素の角を丸くするCSSプロパティです。値を1つだけ書けば全隅が同じ丸みになりますが、実際には4つの隅を別々に指定したり、横方向と縦方向の丸みを分けたりと、意外に奥行きのある仕組みを持っています。このジェネレーターはスライダーを動かすだけで角丸を決め、プレビューを見ながら「border-radius: …;」のCSSを生成・コピーできます。処理はすべてブラウザ内で完結し、入力はどこにも送信されません。ここでは、その値がどう解釈されるのかを実装に沿って解説します。
1〜4値の意味と、時計回りの順序
border-radius に複数の値を並べると、書いた順に各隅へ割り当てられます。順序は左上 → 右上 → 右下 → 左下の時計回りです。4つすべて書けば4隅を個別に指定でき、たとえば「16px 8px 24px 4px」なら左上が16px、右上が8px、右下が24px、左下が4pxになります。
値を省略すると、書かなかった隅は対角の値がミラーされます。2値なら「左上・右下」と「右上・左下」、3値なら「左上」「右上・左下」「右下」を表します。このツールの「4隅個別」モードは、この規則を逆算して連続する同値をまとめ、最短のショートハンドで出力します。
省略ルールを数値例で確認する
4隅個別で左上=20px、右上=5px、右下=20px、左下=5px と設定した場合を考えます。左下(5)と右上(5)が同じなので4値は3値に縮み、さらに右下(20)と左上(20)が同じなので2値まで縮みます。結果は「20px 5px」です。読み手には短い2値に見えても、対角ミラーの規則によって元の4隅が正しく復元されます。
一方、左上=10px、右上=20px、右下=30px、左下=20px なら、左下と右上が同値なので3値の「10px 20px 30px」になります。全隅が同じ値のときは1値に縮み、これは「一括」モードの出力と一致します。
pxと%の違い ― 円・楕円・ピル
単位の px は絶対値で、画面上の実寸のドット数です。カードやボタンの角のように「常に一定の丸み」がほしいときに向きます。対して % は要素の幅・高さに対する比率です。ここが混同しやすい点で、同じ50%でも見え方が要素の形で変わります。
要素が正方形なら全隅50%はきれいな円になりますが、横長の要素だと横に伸びた楕円に見えます。プレビューの形（正方形・横長・縦長）を切り替えると、この差を目で確かめられます。両端が半円のピル形ボタンを作りたいときは、要素の高さの半分以上の大きな px を指定します。実務では高さが変わっても崩れないよう border-radius: 9999px のような十分大きな値を使うのが定番で、このツールの「ピル」プリセットは大きめの px を当てて同じ状態を再現します。px の上限は300、% の上限は100です。
8値スラッシュ記法でブロブ（不定形）を作る
border-radius はスラッシュで区切ると、横方向と縦方向の半径を別々に指定できます。書式は「a b c d / e f g h」で、スラッシュ前の4値が各隅の水平（横方向）半径、後ろの4値が垂直（縦方向）半径です。隅ごとに横と縦の丸みを非対称にできるため、円や楕円では出せない有機的な形が作れます。
「ブロブ」モードは単位を % に固定し、8本のスライダーで前半・後半をそれぞれ操作します。たとえば「30% 70% 70% 30% / 30% 30% 70% 70%」は、左右で水平半径をずらし、上下で垂直半径をずらした値で、にじんだような柔らかい不定形になります。横と縦の値をそろえるほど整った形に、大きくずらすほど崩れた形に近づきます。近年よく見る「ブロブ背景」は、この非対称の組み合わせで作られています。
UIアニメーションでの使いどころ
border-radius は数値プロパティなので、CSSの transition や @keyframes でなめらかに変化させられます。ホバーで角丸を強めてボタンを柔らかく見せたり、正方形から円へ形を変える演出に使えます。とくにブロブの8値は、複数のキーフレームで少しずつ値を変えると、輪郭がゆっくり脈打つように動く「モーフィング」表現になります。
アニメーションでは、始点と終点で値の個数や単位をそろえておくと補間が安定します。px と % が混在したり、片方だけスラッシュ記法だと途中の見た目が乱れやすいので、生成したCSSをそのままコピーし、変化させたい状態ごとに数値だけを差し替えるのが手堅い進め方です。
使い方の手順とよくある注意
基本の流れは、まずプレビューの形を作りたい要素に近づけ、指定モード（一括・4隅個別・ブロブ）を選び、スライダーで丸みを決めて「CSSをコピー」で貼り付けるだけです。「丸み」「カード」「円」「リーフ」などのプリセットから始めて微調整すると早く決まります。
つまずきやすいのは % の扱いです。正方形で作った円を横長の要素に貼ると楕円になるため、実際の要素比率に近いプレビューで確認してください。角を丸めた要素からはみ出す子要素（画像など）を隠したいときは、あわせて overflow: hidden; を指定するときれいに収まります。コピーできない環境では、出力欄のCSSを手動で選択してコピーしてください。