使い方
- 単位を選びます。固定の半径ならpx、箱の大きさに応じた半径なら%です。
- 左上、右上、右下、左下の下で、それぞれの角の半径を入力します。0の角は直角になります。
- 角の幅を高さより広くしたい場合は、楕円の角（縦の半径を別に指定）にチェックを入れ、縦の半径を入力します。
- CSSの宣言をコピーして、要素のルールに貼り付けます。
四隅の書き方
border-radiusプロパティは、1から4個の横の半径を、左上、右上、右下、左下の順で受け取ります。値が少ないときは、そこにある値が繰り返されます。2個の値の場合、1つめは左上と右下、2つめは右上と左下に当たります。縦の半径は、スラッシュの後に同じ順で書きます。
文法はCSS Backgrounds and Borders仕様（英語）にあります。各半径は長さか、箱に対する割合で、半径が0の場合は単位が要りません。
border-radius: top-left top-right bottom-right bottom-left / vertical top-left vertical top-right vertical bottom-right vertical bottom-left最も短い書き方
このツールは、短い書き方で繰り返される値を省きます。左下が右上と同じなら書かず、右下が左上と同じなら3つめの値も省きます。4つの角が同じなら1つにまとめるので、12px 12px 12px 12pxは12pxと書かれます。
縦の半径が横と違うときだけ、スラッシュを書きます。楕円の角を使わなければ、縦の半径は横と同じなので、スラッシュは現れません。
計算例：楕円の角をもつカード
左上を横40px・縦20px、右上を横20px・縦10px、右下を横40px・縦20px、左下を横20px・縦10pxにします。横の半径は40、20、40、20なので、短い書き方では40px 20pxになります。縦の半径は20、10、20、10なので、20px 10pxと書かれます。
宣言は border-radius: 40px 20px / 20px 10px; で、プレビューには縦より横の広い角が現れます。
よくある質問
スラッシュで区切られた2組の数字があるのはなぜですか？
最初の組が各角の横の半径を、スラッシュの後の組が縦の半径を示します。スラッシュがなければ、その角は両方向に同じ半径をもつ円弧になります。
割合（%）の半径は何を基準にしますか？
割合は、横の半径では箱の幅、縦の半径では箱の高さが基準になります。すべての角を50%にすると、箱が正方形なら円、そうでなければ楕円になります。
順序が左上、右上、右下、左下なのはなぜですか？
この短い書き方は、他の箱のプロパティと同じく、左上から始まる時計回りの順序に従います。その順序が分かれば、値が2つか3つの短い形も読みやすくなります。
このツールは半径を箱の大きさと照らし合わせて確かめますか？
いいえ。ツールが確かめるのは、各半径が0以上の数であることと、1000pxまたは100%の上限内であることだけです。隣り合う2つの半径の和が箱の辺より大きい場合は、ブラウザが縮小します。
入力した内容は保存されたり、サーバーに送られたりしますか？
いいえ。プレビューとCSSはブラウザの中で作られます。何も保存もサーバーへの送信もされないので、ページを離れる前に宣言をコピーしてください。
出典
数値と文章の最終確認日：2026年11月10日火曜日。