CSS Border Radius 生成
ボタン·カード·画像の角の丸みをビジュアルで編集します。4つの角を個別に調整でき、上級モードでは楕円形「fancy border-radius」効果(ブロブ形状)も作れます。
使い方
「シンプル」モードは4つの角をそれぞれ単一半径で調整。「上級」モードは横/縦の半径を別々に指定して楕円形の曲線を作ります。
各角のスライダー(0〜100%)を動かすとプレビューが即座に更新。「全て同一」ボタンで4つの角を一括調整も可能。
下部のCSSコードをワンクリックコピー。短縮形(`border-radius: 50%`)または明示形(`border-top-left-radius:`など)から選択可能。
よくある質問
border-radius短縮表記の読み方は？
`border-radius: A B C D` = TopLeft Top-Right BottomRight BottomLeft (時計回り)。スラッシュ(`/`)があれば前は横半径、後は縦半径(楕円形)。例: `border-radius: 50% 50% 50% 50% / 30% 30% 30% 30%`。
pxと%の違いは？
pxは絶対値(要素サイズと無関係)、%は要素の横(横半径)·縦(縦半径)に対する比率です。50%は要素が長方形ならカプセル形、正方形なら円になります。本ツールは%基準で要素サイズに自然に適応します。
「上級」モード(fancy border-radius)とは？
各角ごとに横·縦半径を別々に指定して楕円形曲線を作る技法です。一方が平らな非対称「ブロブ」形を作れ、カードデザインで人気(例: 50% 30% 70% 40% / 60% 40% 50% 30%)。
50%以上はどう見える？
50%なら角が隣接辺の半分まで丸まります。100%なら隣接辺の長さと同じ。4つの角がすべて50%以上なら円·楕円になります。ただし大きすぎると隣接角と重なり自動で比例縮小されます(CSS仕様)。
サーバーに送信されますか？
いいえ。すべての処理はブラウザ内で行われ、入力値が外部に送信されることはありません。
