CSS 角丸ジェネレーター

CSS 角丸ジェネレーターとは？

CSS 角丸ジェネレーターは、CSS の border-radius プロパティを視覚的に編集できる無料ツールで、フロントエンド開発者やデザイナー向けです。レンジスライダーと数値入力で各角の水平・垂直半径をピクセルで設定し、単位を選び、楕円モードをオンにすると楕円の角のスラッシュ構文が得られます。プレビューボックスが角丸の形をリアルタイムで表示し、コンパクトなショートハンド宣言が生成されるのでコピーできます。セグメントコントロールから「角丸」「ピル」「円」や有機的な「ブロブ」などのプリセットを選んで素早く始め、任意の角を微調整できます。柔らかいカード、ピル型ボタン、真円、スクワークル、ブロブ状の装飾形状などを、角の順序を覚えなくても作れます。

CSS 角丸ジェネレーターの使い方

1. セグメントコントロールからプリセット（角丸・ピル・円・ブロブ）を選んで開始形状を読み込みます。
2. 各角のレンジスライダーをドラッグするか数値を入力して、その角の水平半径を設定します。
3. 「楕円」をオンにすると角ごとに 2 つ目の垂直半径が表示され、スラッシュ構文で楕円の角を作れます。
4. 設定で単位（px または %）を選びます。パーセントはボックスの大きさに合わせて半径がスケールします。
5. ライブプレビューの更新を確認し、生成された border-radius のショートハンドをスタイルシートにコピーします。

使用例

四隅すべて 16、楕円オフ

border-radius: 16px;

プリセット ピル、四隅すべて 9999

border-radius: 9999px;

左上 40/20, 右上 10, 右下 40/20, 左下 10, 楕円オン

border-radius: 40px 10px 40px 10px / 20px 10px 20px 10px;

よくある質問

4 つの角の順序は？

ショートハンドは左上から時計回りに角を並べます: 左上、右上、右下、左下。このツールは常にこの順序で 4 つの値を出力するため、結果が明確で、後から手で微調整するのも簡単です。

楕円モードは何をしますか？

border-radius は角ごとにスラッシュで区切った水平半径と垂直半径を取り、円形ではなく楕円形の角を描けます。「楕円」をオンにすると各角に 2 つ目の垂直半径を設定でき、出力は「水平 / 垂直」のスラッシュ構文になります。

px と % のどちらを使うべきですか？

ピクセルはボックスに関係なく固定の角サイズになります。パーセントはボックスの幅と高さに対する相対値なので、各角を 50% にすると正方形が真円になり、要素のサイズ変更に合わせて丸みがスケールします。単位は設定で切り替えます。

真円やピル型はどう作りますか？

正方形から円にするには「円」プリセット（各角 50%）を、短辺を完全な半円にするには「ピル」プリセット（非常に大きなピクセル半径）を選びます。プリセットから始めて個々の角を微調整することもできます。

データはどこかにアップロードされますか？

いいえ。ジェネレーターはすべて JavaScript でブラウザ内で動作します——半径の値がサーバーに送信されることはないため、プライバシーが保たれ、ページの読み込み後はオフラインでも使えます。