角丸・形状ジェネレーター
四隅の水平・垂直の半径をpxまたは%で調整し、形をプレビューできます。生成したborder-radiusのCSSをコピー・保存できます。プレビューの幅・高さ・色はCSSに含まれません。
できること
ひな形から丸みを調整
角丸やカプセル、葉など8つのひな形を選び、半径を調整できます。ひな形を選ぶと、半径と単位が置き換わります。
四隅を別々の丸みに
同じ半径の指定を外すと、左上・右上・右下・左下の水平半径と垂直半径を個別に入力できます。
CSSを確認して受け取る
形を確認したらCSSを生成します。短縮形と角ごとの指定を切り替え、コピーまたはCSSファイルとして保存できます。
使い方
ひな形と単位を選ぶ
そのまま半径を入力するか、ひな形を選んで調整を始めます。単位を変更しても数値は変換されません。
丸みと形を見比べる
同じ半径を使う場合は一つの値を入力します。角ごとに変える場合はチェックを外し、水平・垂直の値を調整してください。
必要に応じて大きさを確認
プレビュー設定で幅と高さ、確認用の色を変更できます。これらは出力するCSSには含まれません。
CSSを生成してコピー・保存
「CSSを生成」を押し、使いたい形式を選びます。半径や単位、大きさを変更した場合は、改めて生成してください。
こんなときに便利
カードやボタンの角を整える
四隅を同じ丸みにしたり、上側だけに丸みを付けたりして、ページの部品に使うCSSを作りたいときに。
非対称の丸い背景を作る
角ごとの縦横の丸みを変え、葉や有機的な形に近い輪郭を作りたいときに。
半径・単位・表示サイズの関係
水平と垂直は同じ角の2方向
水平半径は横方向、垂直半径は縦方向の丸みです。どちらかが0の角は丸くなりません。四隅は左上から時計回りに指定します。
%は幅と高さを別々の基準にする
水平の%は要素の幅、垂直の%は高さを基準にします。同じ数値でも、正方形と縦長・横長では見え方が変わります。pxは長さを直接指定します。
大きすぎる半径は同じ割合で縮む
隣り合う半径の合計が辺の長さを超えると、表示に使う8つの半径が共通の割合で縮小されます。入力値や生成するCSSはそのままです。生成後の詳細で、プレビューに使われる半径を確認できます。
角丸で表せる輪郭の範囲
border-radiusは角を楕円の曲線にする指定です。凹みや任意の多角形は作れません。スクワークルのひな形は楕円の角による近似で、数学的な曲線の完全な再現ではありません。
よくある質問
角ごとに異なる丸みを設定できますか？
はい。「すべての角に同じ半径を使う」のチェックを外すと、各角の水平半径・垂直半径を別々に入力できます。チェックを入れ直すと、左上の水平半径にすべて揃います。
単位を切り替えると数値も変換されますか？
いいえ。数値を保持して単位だけを切り替えます。pxから%へ変えたときに100を超える値が残っている場合は、0〜100の範囲へ入力し直してください。
プレビューの大きさと色もCSSに含まれますか？
含まれません。出力はborder-radiusの指定だけです。幅・高さ・背景色は、使用するページや部品側で指定してください。
表示する形が、入力した半径より小さく丸まるのはなぜですか？
角の曲線が重ならないよう、ブラウザが表示用の半径を同じ割合で縮めるためです。「表示に使われる半径」で縮小率と各角のpx値を確認できます。
入力と結果
- 半径
- 全8値を同じ単位で指定。0〜100%または0〜9999px。小数も入力できます。
- 確認用
- プレビューの幅・高さは1〜400pxの整数。表示しきれない幅は欄内で横スクロール。
- 出力
- border-radiusの短縮形、または4つの角ごとの指定。コピー・border-radius.cssの保存。
- 含まないもの
- 幅・高さ・背景色、画像やSVGの書き出し。