Border Radius ジェネレーター
この CSS border-radius 作成ツールは、角ごとのスライダーか「すべての角」スライダーで要素の border-radius をパーセントで設定でき、円、リーフ、ブロブなどのプリセットも使って CSS をコピーできます。
10%
10%
10%
10%
10%
このツールについて
この CSS border-radius 作成ツールは、角ごとのスライダーか「すべての角」スライダーで要素の border-radius をパーセントで設定でき、円、リーフ、ブロブなどのプリセットも使って CSS をコピーできます。
使い方
- 角ごとのスライダーを動かすか、「すべての角」を使います。
- Circle、Leaf、Blob などのプリセットを試します。
- 必要に応じてプレビューのサイズを変更します。
- 「CSS をコピー」をクリックします。
知っておきたいこと
- border-radius は、左上、右上、右下、左下の順で最大 4 つの値を受け取ります。
- 正方形の要素に border-radius: 50% を指定すると円になります。
- パーセントの半径は要素のサイズに合わせて変わり、ピクセルの半径は固定のままです。
- 向かい合う角の半径を不均等にすると、SVG を使わずにリーフやブロブの形を作れます。
- border-radius は、現在のすべてのブラウザでプレフィックスなしで使えます。
すべてブラウザ内で動作します。入力した内容がアップロード・保存されることはありません。
よくある質問
CSS で角を丸くするには？
border-radius を設定します。すべての角なら border-radius: 12px; のように指定し、角ごとに変えるなら 4 つの値を指定します。
CSS で円を作るには？
要素の幅と高さを同じにし、border-radius: 50% を指定します。
border-radius の 4 つの値の順番は？
左上、右上、右下、左下です。左上の角から時計回りの順になります。
border-radius は px と % のどちらを使うべきですか？
ボタンやカードで角の大きさをそろえたいときは px を、円やブロブのように要素に合わせて拡大縮小する形には % を使います。