角丸（Border Radius）ジェネレーターとは
「角丸（Border Radius）ジェネレーター」は、ボックスの角の丸みを直感的に調整できるツールです。各角を個別にコントロールすることも、すべてをリンクさせて同時に調整することも可能です。単位はピクセル（px）とパーセント（%）から選択できます。
さらに、各角に個別の水平方向および垂直方向の半径を設定して、より柔らかく有機的な形状を作り出す「楕円の角」モードも搭載されています。デザインに合わせて調整を行うと、対応するCSSコードが瞬時に自動生成されます。
主な入力機能と設定項目
このツールには、直感的な操作を可能にする以下の入力機能が備わっています。
- スライダー: 角の丸みを0から100の範囲で調整します。「すべての角をリンク」が有効な場合は「すべての角」という1本のスライダーで4つの角すべてを制御します。リンクが解除されている場合は、「左上」、「右上」、「右下」、「左下」の4本のスライダーが表示されます。「楕円の角」モードが有効な場合は、各角に「水平方向」と「垂直方向」のスライダーが用意されます。初期値は24に設定されており、
border-radius: 24px;が出力されます。 - 単位: 「px」と「%」を切り替えることができます。
- すべての角をリンク: 角の調整を同期させるか、個別に調整するかを切り替えるトグルスイッチです。
- 楕円の角: 楕円モードのオン・オフを切り替えます。
- プリセット: ワンクリックで特定の形状を適用できるボタンです。「シャープ」、「角丸」、「正円」、「アメーバ」、「木の葉」の5つのプリセットが用意されています。
出力機能とコードの取得
調整したデザインは、以下の出力エリアから確認・取得できます。
- プレビュー: 設定した角丸がリアルタイムで適用されるボックスの視覚的表示エリアです。
- CSS: 生成されたCSSコードが「CSS」という見出しの下に表示されます。
- CSSをコピー: 生成されたCSSコードをワンクリックでクリップボードにコピーできるボタンです。
単位と形状変化のルール
4つの角のスライダーは、左上、右上、右下、左下の順に時計回りでマッピングされています。
ピクセル（px）単位を使用する場合、角は指定された固定値で丸められます。一方、パーセント（%）単位を使用する場合、角はボックスのサイズに比例して丸められます。このとき、水平方向のパーセントは幅に従い、垂直方向のパーセントは高さに従って計算されます。
「楕円の角」モードがオフのとき、すべての角は単一の半径を持つ1/4の円になります。このモードをオンにすると、各角に個別の水平半径と垂直半径が適用されます。楕円モードが有効な場合、ジェネレーターはスラッシュ（/）で区切られた2値形式のCSSコードを出力し、角が均等な円形に戻ると自動的に短い形式の記述にフォールバックします。
特定の形状を作成するテクニック
- 正円を作る: 正方形の要素に対して、角をリンクさせ、単位を「%」に切り替えて「50%」に設定します。「正円」プリセットを使用することでも、すべての角が50%に設定され、簡単に正円を作成できます。
- カプセル型（ピル型）のボタンを作る: 単位を「px」のままにして、角のスライダーの値をボタンの高さの半分以上にドラッグします。これにより、ボタンの幅がどのように変化しても、両端が完全に丸い状態を維持できます。
プライバシーとデータ処理について
すべての角の描画処理はお使いのブラウザ上で行われます。ここで設定したデータがBroBroGoにアップロードされることはありません。
よくある質問（FAQ）
4つの角の仕組みと、pxと%の違いについて教えてください。
4つのスライダーは、時計回りに左上、右上、右下、左下の角に対応しています。ピクセル（px）指定では角が固定値で丸められます。パーセント（%）指定ではボックスのサイズに比例して丸められます。水平方向のパーセントは幅に、垂直方向のパーセントは高さに従うため、50%に設定すると正方形が正円になります。
楕円モード（elliptical mode）とは何ですか？
オフの場合、すべての角は単一の半径を持つ1/4の円になります。オンにすると、各角に個別の水平半径と垂直半径を設定できるようになり、柔らかく有機的な「アメーバ（blob）」のような形状を作成できます。ジェネレーターは自動的にスラッシュ（/）で区切られた2値形式のCSSを出力し、角が再び均等な円形に戻ると自動的に短い形式の記述にフォールバックします。
きれいな正円やカプセル型を作るにはどうすればよいですか？
角をリンクさせ、単位を「%」に切り替えて「50%」に設定すると、正方形が正円になります。カプセル型のボタンにするには、単位を「px」のままにして、角の値をボタンの高さの半分以上にドラッグします。これにより、幅が変わっても両端が完全に丸い状態を維持できます。「正円」プリセットを使用すると、ワンクリックで最初のケースを設定できます。