border-radiusジェネレーター

使い方

「四隅」モードでは左上・右上・右下・左下の4本のスライダーで角丸を調整します。出力は同じ見た目になる最短の書き方（全部同じなら1値、対角が同じなら2値…）に自動で縮約されます。単位はpxと%を切り替えられ、「まとめて変更」をオンにすると1本動かすだけで4隅が同じ値になります。「ブロブ（8値）」モードでは水平4つ・垂直4つの半径をスラッシュ区切りで指定する8値構文を作れます。ランダム生成で偶然の形を探すのもおすすめです。

具体例

• 4隅すべて12px → border-radius: 12px;（1値に縮約）
• 左上・右下10px、右上・左下20px → border-radius: 10px 20px;（対角一致で2値）
• 上2つ24px・下2つ0 → border-radius: 24px 24px 0px 0px;（タブ風の上だけ角丸）
• 単位%で4隅50 → border-radius: 50%;（正方形の要素なら正円）
• ブロブ初期値 → border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

4つの値と8つの値の違い

border-radius はスラッシュを挟んで横方向と縦方向の半径を別々に指定できます。border-radius: 40px は四隅すべてが半径40pxの円弧、border-radius: 40px / 20px は横40px・縦20pxの楕円弧になります。このツールの「ブロブ」モードはこの8値指定を使い、四隅それぞれで横縦の比率を変えることで、円でも角丸長方形でもない有機的な形を作ります。

スラッシュなしで値を並べたときの順番は左上・右上・右下・左下（時計回り）です。値が足りないときは対角の値が使われ、2値なら「左上・右下」と「右上・左下」、3値なら「左上」「右上・左下」「右下」に割り当てられます。この省略記法は margin や padding とは順番の埋め方が違うので、生成されたコードをそのまま使うほうが確実です。

%指定と、値が大きすぎるとき

単位に % を使うと、横方向は要素の幅、縦方向は高さを基準に計算されます。正方形なら border-radius: 50% で正円、長方形なら楕円になります。要素のサイズが変わっても比率が保たれるので、レスポンシブなカードやアバターに向いています。px指定は要素が小さくなっても半径が変わらないため、狭い画面で角が丸すぎる見た目になりがちです。

指定した半径の合計が辺の長さを超えると、ブラウザはすべての半径を同じ比率で縮めて収まるようにします。たとえば幅100pxの要素に左右80pxずつ指定しても、実際には50pxずつに縮小されます。エラーにはならないので、プレビューと生成コードの数値が食い違って見えるときはこの縮小が働いています。なお角丸は要素の外形にだけ効くもので、中の画像をはみ出させないためには overflow: hidden が別途必要です。

よくある質問