重要なポイント
- 013つのモード — 統一、コーナー別、楕円形 — シンプルな丸いボタンから有機的なブロブシェイプまですべてをカバー。
- 02px、%、remユニットをサポートし、各ユニットは異なるスケーリング動作を持ちます。
- 03楕円形モードでは、各コーナーの水平および垂直ラジウスを露出させ、CSSの完全なボーダーラジウス構文をサポートします。
- 04ライブプレビューは実際のCSSプロパティを使用しているため、見たものがブラウザで正確にレンダリングされます。
シンプルな丸角から有機的なブロブシェイプまで
4つのコーナーボーダーラジウス値は単純です — border-radius: 8px。しかし、コーナーごとに異なるラジウスが必要な場合、または有機的シェイプ用のCSSの楕円形構文を使用したい場合、短縮形はすぐに複雑になります。完全な形は「top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y」です — 特定の順序で8つの値です。
Handytoolのボーダーラジウスジェネレータでは、任意のモードでコーナーのスライダーをドラッグし、シェイプをリアルタイムで更新できます。px、%、remを再計算することなく切り替え、完了時に正しい短縮形または長形のCSSコード宣言をコピーします。
ボーダーラジウスの設計方法
- 01
モードを選択
統一モードは1つのラジウスをすべての4つのコーナーに適用します。コーナー別モードは各コーナーを独立して制御します。楕円形モードはコーナーごとに別の水平および垂直ラジウスを追加します。
- 02
ユニットを選択
絶対サイズの場合はpxを、要素の寸法でスケールする値の場合は%を、ルートフォントサイズに関連するサイズの場合はremを選択します。
- 03
スライダーをドラッグ
ラジウス値を調整し、プレビュー要素がリアルタイムで更新されるのを確認します。コーナー別モードの場合、各コーナーのスライダーを個別にドラッグします。
- 04
シェイプをプレビュー
プレビューボックスは実際のCSSボーダーラジウスプロパティを適用し、ブラウザでレンダリングされるシェイプが見たものです。
- 05
CSSをコピー
コピーをクリックしてボーダーラジウスコード宣言を取得し、スタイルシートに貼り付けます。
よくあるシェイプと各モードの使用時期
- 01ピルボタン：統一%モード、50%に設定 — ボタン幅に関わらず常に完全なピル
- 02微妙な丸みを帯びたカード：統一pxモード、8–16px — 最も一般的なUIパターン
- 03非対称なタグまたはラベル：コーナー別モード、片側は鋭角、反対側は丸い
- 04アバター円：統一%モード、50% — 画像コンテナでスケール
- 05有機的なブロブシェイプ：楕円形モード、コーナーごとに異なるX/Y値
即座のプレビュー、アップロードなし
ボーダーラジウスジェネレータは完全にクライアント側です。スライダー、モード切り替え、ユニット変更はすべてプレビューを即座に更新し、サーバーラウンドトリップはありません。アカウントなし、レート制限なし。
このツールはすべての最新ブラウザで動作します。ボーダーラジウスプロパティ — 楕円形X/Y構文を含む — は、Safari、Firefox、Edge、Chromeのすべてのエバーグリーンバージョンでサポートされているため、ベンダープレフィックスやフォールバックなしで安全に使用できます。
ボーダーラジウスジェネレータFAQ
ボーダーラジウスのpxと%の違いは何ですか？
ピクセルラジウスは絶対値 — 16pxは常に16px。パーセンテージラジウスは要素の寸法に相対的であり、50%は正方形ボックスで完全な円を、長方形で楕円を作成します。
楕円形モードはいつ使うべきですか？
1つの軸に沿ってもっと膨らむコーナーが必要な場合、楕円形モードを使用します — 水平ピルの場合、葉の形、または有機的なブロブなど。CSSはこれを短縮形のボーダーラジウスでX-radii / Y-radiasと表現します。
非正方形ボックスでパーセンテージラジウスが間違って見えるのはなぜですか？
水平パーセンテージは要素の幅に、垂直パーセンテージはその高さに相対的です。幅の広い短い要素では、角は円形の弧ではなく楕円に伸びます。
出力はすべてのブラウザで機能しますか？
はい — 楕円形構文を含むボーダーラジウスは、Safari、Firefox、Edge、Chromeのすべての最新ブラウザでサポートされています。ベンダープレフィックスは不要です。
ボーダーラジウスで完全な円を作成するにはどうすればよいですか？
正方形要素のパーセンテージモードですべてのコーナーを50%に設定します。要素には等しい幅と高さが必要です — サイズが動的な場合はaspect-ratio: 1 / 1を使用します。