ボーダーラディウスジェネレーター
個別のコーナー制御で CSS の border-radius 値を視覚的に作成。すぐ使える CSS コードをコピー。無料のオンライン border-radius ジェネレータ。
主な機能
- コーナーごとの個別 radius 制御
- 均一値にするコーナーの連動・解除
- プリセット形状（ピル、円、葉、チケット）
- ワンクリックで CSS コードをコピー
Guide
CSS の border-radius プロパティは要素のコーナーの丸みを制御します。最も単純には border-radius: 8px は4つのコーナーすべてを8ピクセル丸めます。最も複雑には、border-radius は8つの値（スラッシュで区切られた4つの水平半径と4つの垂直半径）を受け取り、有機的で非円形の形状を作る非対称で楕円のコーナーを生成します。本ガイドでは border-radius のあらゆる側面を取り上げます：構文、視覚効果、一般的なパターン、パフォーマンスの考慮事項、デザインの応用です。 基本構文は各コーナーの円の半径を表す1〜4つの値を取ります。1つの値は4つのコーナーすべてに適用されます：border-radius: 10px。2つの値は左上/右下と右上/左下を設定します：border-radius: 10px 20px。3つの値は左上、右上/左下、右下を設定します：border-radius: 10px 20px 30px。4つの値は左上から時計回りに各コーナーを個別に設定します：border-radius: 10px 20px 30px 40px。また、個別の longhand プロパティで個々のコーナーをターゲットにできます：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius。 パーセンテージ値は要素とともに拡大縮小する効果を作ります。正方形の要素に border-radius: 50% は完全な円を作ります。長方形の要素では50% は楕円を作ります。これはパーセンテージ値が要素の寸法に相対的だからです：水平半径は幅のパーセンテージで、垂直半径は高さのパーセンテージです。border-radius: 50% の200x100px の要素は100px の水平半径と50px の垂直半径を持つコーナーを持ち、円ではなく楕円を作ります。この寸法の関係は、異なるビューポートサイズで要素の比率が変化するレスポンシブなレイアウトを扱うときに理解することが重要です。 スラッシュ構文は水平と垂直の半径が異なる楕円コーナーを実現します。border-radius: 50px / 25px は垂直よりも水平により多く曲がるコーナーを作り、引き伸ばされた卵型の効果を作ります。完全な8値の構文は：border-radius: TL-h TR-h BR-h BL-h / TL-v TR-v BR-v BL-v で、h は水平半径、v は垂直半径です。このレベルの制御により、他の方法では達成が困難な有機的でブロブ状の形状を作れます。border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% のような値は、現代のウェブデザインで装飾的なブロブ、アバター背景、セクション区切りによく使われる非対称で自然に見える形状を作ります。 border-radius の背後にある幾何学を理解すれば視覚的な結果を予測するのに役立ちます。要素の各コーナーはその中にフィットする楕円（両半径が等しい場合は円）を持ちます。境界、背景、コンテンツはすべてこの角丸長方形にクリップされます。各コーナーの楕円はその水平半径（上端または下端に沿って伸びる）と垂直半径（左端または右端に沿って伸びる）で定義されます。両半径が等しいとき、コーナーは円弧です。異なるとき、コーナーは楕円弧です。この楕円を視覚化すれば、特定の値の組み合わせがなぜ予想外の形状を作るかを理解できます。 完全な円の作成には2つの条件があります：要素が正方形（幅と高さが等しい）でなければならず、border-radius が50% または要素のサイズの半分に等しい値でなければなりません。要素が正方形でなければ、border-radius: 50% は楕円を作ります。プロフィール写真やアバターでは、等しい幅と高さの値でコンテナーを正方形にするか、CSS で aspect-ratio: 1 を使い、そのあと border-radius: 50% を適用します。コンテナーの overflow: hidden が画像を円形にクリップします。代替として clip-path: circle(50%) を使えば同じ視覚結果が生まれます。 ピル形状（スタジアム形状）は短辺が完全に丸い長方形です。要素の高さの半分以上に等しい値で border-radius を適用します。高さ40px のボタンには border-radius: 20px が両端を半円に丸めます。border-radius: 9999px のような非常に大きい値は、ブラウザが最小の寸法の半分に半径を制限するため、要素の高さに関わらずピル形状を保証します。この技法は現代の UI デザインのタグ、バッジ、ボタン、入力フィールドで一般的です。ピル形状は Apple の Human Interface Guidelines を含む多くのデザインシステムで既定のボタンスタイルになりました。 border-radius はレンダリングされた結果に影響する形で他のいくつかの CSS プロパティと相互作用します。境界自体が影響を受けます：境界線は丸いコーナーに従い、曲がり全体を通じて幅を維持します。outline はほとんどのブラウザで border-radius に従わず、要素に丸いコーナーがあっても長方形としてレンダリングします（ただし Firefox と新しい Chromium バージョンは丸い outline をサポートするようになりました）。box-shadow は border-radius に従い、要素の形状に合う丸い影を落とします。overflow: hidden は子コンテンツを丸い形状にクリップし、丸いコンテナー内の画像に不可欠です。background-clip は背景が境界の下の丸い領域に伸びるかを決定します。 border-radius のレンダリングアルゴリズムは、隣接する半径の合計が利用可能なスペースを超えるときの競合を解決します。幅150px の要素に border-top-left-radius: 100px と border-top-right-radius: 100px を設定すると、2つの半径の合計は200px ですが利用可能なのは150px です。ブラウザは両方の半径をフィットするように比例して減らします。具体的には、スケーリング係数（150/200 = 0.75）を計算し両方の半径に適用し、結果としてそれぞれ75px にします。この自動調整により、オーバーフローを心配せずに大きい半径値を使えますが、視覚結果は意図と異なるかもしれません。アルゴリズムは4つのコーナーすべてを同時に考慮し、必要な最小のスケーリング係数を見つけます。 ネストされた border-radius は、一貫した視覚的な間隔を維持するために、内側の要素が親より小さい半径を持つことを必要とします。カードが border-radius: 16px と padding: 8px を持つ場合、内側のコンテンツ領域は border-radius: 8px（親の半径から padding を引いたもの）を持つべきです。公式は：内側の半径 = 外側の半径 - 要素間のギャップ です。ギャップが外側の半径より大きい場合、内側の半径は0（丸みなし）にすべきです。この原則は画像を含むカード、ネストされたコンテナー、両方に丸いコーナーを持つ親子関係に適用されます。このルールを無視すると、すぐに理由を特定できなくても視覚的に間違って見えるコーナーで一貫性のないギャップ幅を作ります。 CSS シェイプと border-radius は異なる目的を果たしますが、時に混同されます。border-radius は要素の視覚的なコーナーとヒット領域を丸めます。CSS clip-path はクリッピングによって任意の形状（circle()、ellipse()、polygon()、path()）を作ります。単純な角丸長方形には border-radius の方が高性能で保守しやすいです。複雑な形状（三角形、六角形、カスタムポリゴン）には clip-path が必要です。border-radius は GPU で合成され、CSS で最も安価な視覚効果の一つです。複雑なポリゴンでの clip-path はより高価になることがあります。shape-outside プロパティは丸い要素の周りにテキストを回り込ませるために border-radius を使い、雑誌スタイルのレイアウトを作ります。 border-radius のパフォーマンスは一般に優れています。丸いコーナーはすべてのモダンなブラウザで GPU コンポジターによってレンダリングされ、アニメーション中にレイアウトの再計算や再描画を引き起こしません。border-radius 自体のアニメーションも、ブラウザが値を補間し GPU 上で結果を合成できるため高性能です。これにより border-radius はホバー効果（四角いコーナーから丸いコーナーへの移行）やアニメーション要素に適しています。唯一のパフォーマンスの考慮事項は、border-radius が多くの要素で box-shadow と組み合わされるときで、各丸い影が追加の合成作業を必要とするからです。 border-radius のブラウザサポートは、すべてのモダンなブラウザで接頭辞なしで普遍的です。-webkit-border-radius と -moz-border-radius の接頭辞はほぼ2012年以降不要です。唯一のエッジケースは楕円コーナーのためのスラッシュ構文で、IE9 以降どこでもサポートされています。極端に古いブラウザ（IE8）をサポートする場合、border-radius は優雅に劣化します：要素は単に四角いコーナーでレンダリングします。機能は失われず、視覚的な丸みだけです。 border-radius を含むデザイントレンドは極端の間で循環します。2010年代前半はわずかな3〜5px の丸みが好まれました。2010年代半ばにはフラットデザインで鋭い0px のコーナーに戻りました。2010年代後半にはマテリアルデザインと iOS の影響を受けたインターフェースで8〜16px の半径の柔らかい丸みが戻りました。2020年代前半には20px以上の半径と非対称のブロブ形状を持つ超丸みデザインが登場しました。現在のトレンドは UI コンポーネントには中程度の丸み（8〜16px）、カードとコンテナーにはより大きい丸み（24px以上）を好み、柔らかく親しみやすい感じを作ります。Apple がアプリアイコンに使うスクウェアル（超楕円）形状は人気を集めましたが、border-radius は標準的な円弧を作り超楕円を作らないため、clip-path または SVG を必要とします。 デザインシステム全体で一貫した border-radius 値が視覚的な統一性を作ります。半径トークンのスケールを定義します：--radius-sm: 4px、--radius-md: 8px、--radius-lg: 16px、--radius-xl: 24px、--radius-full: 9999px。これらのトークンを一貫して適用します：ボタンは --radius-md、カードは --radius-lg、アバターは --radius-full、小さなバッジは --radius-sm。この体系的なアプローチは、デザインを未完成に感じさせるランダムな半径値（ここでは6px、そこでは10px、別の場所では14px）の視覚的な不整合を防ぎます。多くの CSS フレームワーク（Tailwind、Chakra UI）がこの理由で定義済みの半径スケールを含みます。 レスポンシブな border-radius は clamp()、min()、またはメディアクエリを使って実現できます。border-radius: clamp(8px, 2vw, 24px) のカードは小さい画面ではより小さい丸み、広い画面ではより大きい丸みを持ちます。これにより大きい半径がモバイルの小さい要素を支配するのを防ぎます。代わりに、モバイルのブレイクポイントで border-radius を減らします：デスクトップでは border-radius: 24px、タブレットでは12px、モバイルでは8px。画面の端に触れる全幅のモバイルカードには、小さい画面で border-radius を完全に除去する（モバイルブレイクポイントで border-radius: 0）のがコンテンツ領域を最大化する一般的なパターンです。 画像での border-radius は、画像を丸い形状にクリップするためにコンテナーの overflow: hidden を必要とします。overflow: hidden がなければ、画像は丸いコーナーを超えて伸び、丸みはコンテナーの背景にのみ現れます。代替アプローチは画像自体を丸い要素の background-image として使います。<img> 要素では、object-fit プロパティが画像が丸いコンテナーをどう満たすかを制御します：object-fit: cover は全体を満たし（必要に応じて切り抜き）、object-fit: contain は画像全体を内側に収めます（隙間が残る可能性）。両方のアプローチが機能しますが、子 <img> を持つコンテナーの overflow: hidden は、アクセシビリティ（alt テキスト）と SEO のために img 要素を保つためにより一般的です。 高度な形状作成は border-radius を他の CSS プロパティと組み合わせて、画像や SVG なしで複雑な形を作ります。卵型は非対称の垂直半径を使います：border-radius: 50% / 60% 60% 40% 40%。葉の形状は反対のコーナーの丸みを使います：border-radius: 0 50% 0 50%。しずく型は3つのコーナーの border-radius を鋭い第4のコーナーと組み合わせます。吹き出しはメインの形状の border-radius を、尾のために疑似要素（::before または ::after）と組み合わせて使います。これらの CSS のみの形状は、単純な装飾要素のために SVG や画像の必要性をなくし、HTTP リクエストを減らし、CSS カスタムプロパティを通じた容易なカラーテーマ化を可能にします。 border-radius とテキストコンテンツは特定の形で相互作用します。丸い要素の内側のテキストは曲線に従いません。テキストは長方形のコンテンツボックスに配置され、丸いコーナーは背景と境界のみをクリップします。小さい半径値ではこれは目立ちません。大きい半径値では、丸い背景がコンテンツの端から後退するため、コーナー近くのテキストに追加の padding があるように見えることがあります。これが、大きい border-radius 値を持つ要素が四角い対応物より多くの padding を必要とすることが多い理由の一つです。ボタンに border-radius: 24px を設定する場合、テキストが曲線の端に視覚的に寄り掛からないように padding を少なくとも12〜16px にすべきです。 状態間の border-radius のアニメーションは滑らかな形状移行を作ります。正方形の要素で border-radius: 0 から border-radius: 50% に移行すれば、正方形から円にモーフします。この効果はローディングインジケーター、ホバー効果、リビールアニメーションで人気があります。CSS transition: border-radius 0.4s ease が補間を処理します。より複雑なモーフィング（スラッシュ構文を使った異なる非対称形状間の移行）には、CSS トランジションが8つの値それぞれを独立して補間し、滑らかな中間形状を作ります。 印刷スタイルシートと border-radius は、ユーザーが印刷するかもしれないウェブアプリケーションのために考慮に値します。ほとんどのモダンなブラウザは印刷で border-radius をレンダリングしますが、一部の古いバージョンはしません。デザインが意味のために（単なる装飾でなく）丸いコーナーに依存する場合、印刷出力をテストしましょう。請求書、レシート、その他の印刷可能な文書では、丸いコーナーは装飾的であり、印刷でのそれらの欠如は使いやすさに影響しません。 CSS フレームワークとコンポーネントライブラリでの border-radius は、トークンベースのアプローチに標準化されました。Tailwind CSS は rounded-sm、rounded、rounded-md、rounded-lg、rounded-xl、rounded-2xl、rounded-3xl、rounded-full のようなクラスを使います。Bootstrap は rounded、rounded-circle、rounded-pill、rounded-0 から rounded-5 を使います。Chakra UI は名前付きサイズ（sm、md、lg、xl、full）で borderRadius を使います。これらのフレームワークが border-radius をどう実装するかを理解すれば、システム間の移行やデザイン要件に合わせた既定値のカスタマイズに役立ちます。 スクウェアル（超楕円）は角丸長方形のように見えますが、異なる数学的曲線を持つ形状です。Apple は iOS アプリアイコンにスクウェアルを使います。スクウェアルは直線の端から曲線への移行により緩やかな曲率を持ち、標準的な border-radius の円弧より柔らかい外観を作ります。CSS border-radius は円弧または楕円弧を使うため、真のスクウェアルを作れません。CSS でスクウェアルを作るには、path() 関数を持つ clip-path または SVG マスクが必要です。border-radius の角丸長方形とスクウェアルの視覚的な違いは小さいサイズでは繊細ですが、大きいサイズ、特に20px を超えるコーナー半径では目立ちます。 コンテナークエリと border-radius は、真にレスポンシブなコンポーネントデザインのために連携できます。CSS コンテナークエリ（@container）を使えば、ビューポートサイズではなくコンテナーサイズに基づいて border-radius を変更できます。広いコンテナー内で border-radius: 24px のカードコンポーネントは、ページ全体の幅に関わらず、狭いサイドバーに配置されたときに border-radius: 12px に切り替えられます。このコンポーネントレベルのレスポンシブさは、ビューポートベースのメディアクエリ単独よりも一貫した視覚結果を作ります。 テーブル要素での border-radius は特別な扱いを必要とします。既定では、<table> 要素の border-radius は個々のセルのコーナーを丸めません。丸い外側のコーナーを持つテーブルを作るには、テーブルに border-collapse: separate（collapse ではなく）を設定し、table 要素に border-radius を適用し、overflow: hidden で隠します。個々の丸いセルには、特定の <td> または <th> 要素に border-radius を適用します。border-top-left-radius は最初の行の最初のセルに、border-top-right-radius は最初の行の最後のセルに、といった具合です。このセルごとのアプローチは冗長ですが、正確な制御を提供します。 トランジションのタイミング関数は border-radius アニメーションがどう感じられるかに影響します。linear トランジションは機械的でロボット的な丸みを作ります。ease トランジションは速く始まり、中盤で遅くなり、終わりでまた速くなり、自然な感じを作ります。ease-in-out トランジションは滑らかな加速と減速を作ります。遊び心のあるインターフェースには、cubic-bezier 関数が弾力のあるまたはばねのような半径の変化を作れます：transition: border-radius 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) は落ち着く前にターゲット値を行き過ぎます。タイミング関数をインターフェースの全体的なアニメーションスタイルに合わせましょう。 CSS Houdini と Paint API は、現在の仕様が提供するものを超えた border-radius の将来の可能性を開きます。Houdini を使えば、標準的な border-radius が作れない任意のコーナー形状を描画するカスタムペイントワークレットを作れます：スクウェアル、扇形の縁、波状の境界、その他の形です。Houdini のサポートはまだ限定的（主に Chromium ブラウザ）ですが、カスタム CSS 形状の未来を表します。それまでの間、SVG clip-path とマスクが非標準のコーナー形状のためのクロスブラウザの代替を提供します。 画面解像度とピクセル密度をまたぐ border-radius のテストは重要です。曲線のエッジのレンダリングが標準（1x）、Retina（2x）、およびより高密度のディスプレイ間で異なるからです。1x ディスプレイでは、丸いコーナー上の1px の境界がぎざぎざに見えることがあります。2x ディスプレイでは、曲線を表現するためにより多くの物理ピクセルが利用可能なため、同じコーナーが滑らかにレンダリングされます。対象とするオーディエンスに低密度ディスプレイのユーザーが含まれる場合、丸いコーナーが1x 解像度で許容可能に見えることをテストしましょう。曲線がより緩やかなため、より大きい半径値はすべての密度でより滑らかにレンダリングします。 border-radius 生成ツールを使えば、各コーナーの水平と垂直の半径を独立して視覚的に調整し、リアルタイムで結果をプレビューし、CSS をコピーできます。これはコードで値を推測するより速く、特に8つの値と視覚出力の関係が直感的でないスラッシュ構文に有用です。生成ツールを使い、非対称の形状を探検し、デザインの意図に合う正確な値を見つけ、それからスタイルシートでそれらの値を適用しましょう。
よくある質問
コーナーごとに違う値を設定できますか？
はい。左上・右上・右下・左下の4つすべてを個別に制御できます。
使用する単位は？
既定ではピクセル（px）を使用します。CSS 出力で必要に応じて変更できます。
