視覚的な border-radius ジェネレーター
Webコンポーネントに最適な角丸を作るために、数値を推測してブラウザを何度もリロードする必要はありません。この視覚的な border-radius ジェネレーターを使えば、スライダーを調整するだけで、カーブが要素にどう影響するかを即座に確認できます。理想のスタイルが完成したら、最適化されたCSSコードをクリップボードに直接コピーできます。
すべての計算とプレビューはブラウザ上でローカルに処理されるため、このツールは非常に高速で、プライバシーも完全に保護されます。デザインした内容やクリックしたデータがサーバーに送信されることは一切ありません。
CSSの角丸を使いこなす
border-radius プロパティはモダンなWebデザインの基本であり、ボタン、画像、モーダル、レイアウトコンテナなどの鋭い角を丸くするために使用されます。一見シンプルに見えますが、特定の角だけを指定しようとすると、その構文は意外に複雑になることがあります。
この border-radius CSS ジェネレーターは、CSSのショートハンド構文を理解し、効果的に活用するのに役立ちます。すべての角の値を連動させた場合、ツールは単一の値を出力します（例：border-radius: 16px;）。連動を解除して個別の形状を作成する場合、ジェネレーターは入力内容に基づいてCSSを自動的にフォーマットします。
- 4つの値: すべての角が異なる場合、CSSは左上から時計回りの順に適用されます（例：
border-radius: 16px 8px 4px 2px;）。 - 2つの値: 左上と右下、右上と左下がそれぞれ同じ値の場合、ツールはコードをスマートに2つの値にまとめます（例：
border-radius: 16px 0;）。
ピクセルとパーセント
CSSで角丸を指定する際、最もよく悩むのが適切な単位の選択です。このツールでは、UIデザインにおいてそれぞれ異なる役割を持つピクセル（px）とパーセント（%）を簡単に切り替えることができます。
ピクセル (px) は絶対単位です。小さなボタンでも大きなヒーロー画像でも、12pxの角丸は常に全く同じ丸みになります。アプリケーション全体で一貫した統一感のあるデザインを保つことができるため、カード、ドロップダウンメニュー、入力フィールドなどのUIコンポーネントではピクセルを使うのが標準的です。このツールでは、最大200pxまでのピクセル値を設定できます。
パーセント (%) は、要素自体のサイズに対する相対単位です。正方形の要素に50%の角丸を指定すると、要素の幅が50ピクセルでも500ピクセルでも、常にきれいな正円になります。要素が長方形の場合、50%を指定すると楕円形になります。プロフィールのアバター画像や装飾的な背景要素（blob）など、レスポンシブな要素にはパーセントが最適です。CSSでは50%を超えても見た目の丸みは変わらないため、このツールではパーセントの最大値を50%に制限しています。
基本的な角丸の枠を超えて：CSS図形ジェネレーター
border-radiusは、主にシンプルな角丸を作るために使用されますが、強力なCSS図形ジェネレーターとしても機能します。四隅の値を個別に設定し、極端な数値を組み合わせることで、SVGファイルや複雑なclip-pathを使わずに、ユニークな幾何学図形を作成できます。当ツールでは、これを活用したいくつかのプリセットを用意しています：
- カプセル: すべての角に極端に大きなピクセル値（
9999pxなど）を指定すると、「カプセル」またはスタジアム型の図形になります。これは、バッジ、タグ、モダンなCTAボタンなどで広く使われています。ブラウザの仕様により、角丸の最大値は要素の高さのちょうど半分に制限されるため、両端がきれいな半円になります。 - 円: すべての角を
50%に設定すると、正方形がきれいな正円になります。 - 葉: 左上と右下の角を
0に、右上と左下の角を大きな値（48pxなど）に設定すると、非対称で自然な葉の形になります。 - タブ: 下の角を
0にしたまま、左上と右上の角だけを丸める（例：16px）と、ナビゲーションメニューに最適な、定番のフォルダタブ型になります。
UIコンポーネントを洗練させる
角丸が単独で使われることは少なく、通常は統一感のあるデザインシステムの一部として機能します。例えば、優れたデザインのカードコンポーネントは、控えめな角丸に奥行きや色を組み合わせることで、ページ上で美しく際立ちます。
理想の角丸を作成したら、他のCSSエフェクトと組み合わせてデザインを完成させましょう。Box Shadowジェネレーターを使って柔らかなドロップシャドウを追加すれば、要素がふわりと浮き上がったような立体感を演出できます。ボタンや背景の装飾要素をデザインする場合は、CSSグラデーションジェネレーターで鮮やかな背景を適用したり、カラーパレットジェネレーターで相性の良い単色を見つけるのもおすすめです。