💻 開発者ツール

border-radiusジェネレーター

スライダーで四隅の角丸を調整し、CSSのborder-radiusを最短のショートハンドで出力します。8値指定のブロブ（有機的な形）モードとランダム生成にも対応。プレビューはリアルタイムに更新され、処理はブラウザ内だけで完結します。

例（クリックで試す）
モード
単位

使い方

「四隅」モードでは左上・右上・右下・左下の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つの値はどの角から順に指定しますか？
左上→右上→右下→左下の時計回りです。値が省略された場合、CSSは対角の角の値を引き継ぎます。本ツールは同じ見た目になる最短の書き方（1〜4値）に自動で縮約します。
pxと%はどう使い分けますか？
pxは要素の大きさに関係ない固定の丸みで、カードやボタンに向きます。%は要素の幅・高さに対する割合で、サイズに追従します。正方形の要素に50%を指定すると正円になります。
ブロブ（8値）モードとは何ですか？
スラッシュ区切りで水平方向4つ・垂直方向4つの半径を別々に指定するCSSの書き方です。四隅の丸みが非対称になり、有機的なブロブ形状を作れます。ランダム生成で好みの形を探すのも便利です。