CSS border-radiusジェネレーター

Bogdan Sandu (EN) 著 · 公開 2026 年 4 月 27 日 · 最終更新日 2026 年 9 月 13 日

CSS border-radius生成ツールは、ブラウザで使える無料のツールです。コードを1行も書かずに、角丸の値を視覚的に調整し、プレビューで確認できます。

あらゆる要素を数秒で整形します。スライダーをドラッグするか、プリセットを選択するか、正確な値を入力します。プレビューはライブで更新されます。

主な機能:

• 楕円半径は水平軸と垂直軸の両方を個別に制御し、単純な丸い角を超えた形状をロック解除します。
• Pill、Circle、Squircle、Leaf、Ticket、Diamond、Wave、Egg を含む10 個のプリセット
• 複数のエクスポート形式: プレーン CSS、SCSS、CSS-in-JS、Tailwind 構成
• 対称または完全にカスタムの形状を実現するリンクまたは独立したコーナー
• 元に戻す/やり直しのサポートにより、自由に実験できます
• -webkit- の互換性のためのベンダー プレフィックスの切り替え
• 選択可能な背景 (ソリッド、チェッカーボード、グリッド) とコンテンツ タイプ (テキスト、アバター、ボタン、カード) を備えたライブ プレビュー

生成された CSS はコピーして貼り付けることができます。サインアップもインストールも、無意味なことはありません。

CSS 境界半径ジェネレーターとは何ですか

CSS border-radius生成ツール は、スライダー、ドラッグ ハンドル、コーナーの数値入力をすぐに使用できる CSS (EN) コードに変換するブラウザベースのビジュアル ツールです。

値を手で入力する代わりに、角をドラッグして形状が更新されるのを確認し、 結果として得られる境界半径宣言をスタイルシートに直接コピーします。

ほとんどのジェネレーターは、同じコア コントロールを提供します。

• 各コーナーの個別のスライダーまたは数値フィールド
• プレビュー形状上で直接引くことができるドラッグ ハンドル
• 移動に応じて生成された短縮表現を表示するライブ コード パネル

人々は、ほとんど同じ少数の仕事のために、このサービスに手を伸ばします。カードのデザインを丸くしたり、ボタンを柔らかくしたり、アバターを円形にしたり、ヒーローセクション用に珍しいブロブスタイルのパネルを構築したりできます。

デザインシステムは、この決定を推測に任せるのではなく、形式化する傾向があります。 Google のマテリアル デザイン (EN)が良い例です。各画面に独自の番号を選択させるのではなく、固定コーナー ステップを特定のコンポーネント タイプに割り当てます。

Border-Radius プロパティは CSS でどのように機能しますか

border-radius プロパティ (EN)は、プレーンな div から完全にスタイル設定されたボタンに至るまで、あらゆるボックスの角を丸くします。要素に表示される境界線があるかどうかに関係なく機能します。

これはボックス モデル自体に適用されるため、パディングと背景の外縁に影響します。これは、追加のラッパーを使用せずに HTML (EN) マークアップから直接構築された要素にも当てはまります。

.card {
  border-radius: 12px;
}

.avatar {
  border-radius: 50%;
}

一括指定と個別指定の構文

border-radius は、コーナーごとに 1 つずつ、4 つの個別の手書きプロパティの短縮形です。

4 つすべてを手書きで記述する必要があることはほとんどありませんが、設計で非対称性が要求されると、マッピングを知っておくことが重要になります。

4 つの手書き同等物、border-top-left-radius と他の 3 つは、まったく同じ値を受け入れます。これらは、ジェネレーターが 1 つのコーナーのみをターゲットにする必要がある場合に、舞台裏で書き込むものです。

/* shorthand */
border-radius: 12px 4px 12px 4px;

/* the same thing, longhand */
border-top-left-radius: 12px;
border-top-right-radius: 4px;
border-bottom-right-radius: 12px;
border-bottom-left-radius: 4px;

4 隅の半径の値

コーナーの順序は重要です:

• 左上が常に最初になります
• 右上と右下は時計回りに続きます
• 左下でループを閉じます

手書きの宣言でこの順序を間違えると、四捨五入がボックスの間違った側に着地します。これは、スタイルシートにおける最も一般的なサイレント バグの 1 つです。

この正確なコーナー構文は、長い間安定していました。 MDN の互換性テーブル (EN)の背後にある Web 機能データセットによると、このプロパティは 2015 年 7 月に新しく利用可能なベースラインに達し、2018 年 1 月に広く利用可能なベースラインに達しました。

ジェネレーターは、各コーナーに独自のラベル付きコントロールがあり、ツールが短縮表現を組み立てるため、順序付けの問題を完全に回避します。

どのユニットが境界半径をサポートするか

Border-radius は長さのパーセンテージ値を受け入れます。これは、実際には、ピクセル、パーセンテージ、em、およびremの 4 つの実際のオプションが日常的に使用されることを意味します。

ユニットの動作は見た目以上に異なります:

• px は、要素自体の寸法によって変更されない固定の角のサイズを与えます。
• % は、要素自体の幅と高さの割合として角を計算します。これにより、50% で正方形の div が完全な円に変わります。
• em は、要素自体のフォント サイズに対して半径をスケーリングします。
• rem はルート フォント サイズに合わせてスケールするため、親が独自の文字サイズを変更しても、ネストされたコンポーネントの一貫性が保たれます。

最後の 2 つのどちらかを選択する問題はよく出てくるので、設計システムに値を固定する前に、em と rem の違い (EN)を理解する価値があります。

パーセンテージ値は、コーナー半径を真に応答性のあるものにするものです。 レスポンシブ デザイン (EN)への広範なアプローチの一環として形状が自動的に再計算され、ブレークポイントごとにメディア クエリが書き換えられることはありません。

製品設計システムでは、画面ごとに値を選択するのではなく、実際の数値を使用してこれらの選択肢を固定する傾向があります。たとえば、マテリアル デザイン 3 のシェイプ スケール (EN)では、非常に小さなコーナー ステップに 4 dp、非常に大きなサーフェスに 28 dp が指定され、間にいくつかの固定ステップが含まれます。

楕円形の境界半径の仕組み

楕円形の境界半径では、値の内側にスラッシュを使用して、同じ角に異なる水平半径と垂直半径を設定します。単純な半径では単一の円弧のみが生成されます。

水平半径と垂直半径のペア

構文は、スラッシュで区切られた 2 つの部分に分かれており、最初に水平方向の半径、2 番目に垂直方向の半径が表示されます。

/* horizontal radius 40px, vertical radius 20px, every corner */
border-radius: 40px / 20px;

/* four corners, each with its own horizontal / vertical pair */
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;

単一の円半径では、両方の軸に 1 つの数値が使用されます。楕円形では 2 つの軸が異なるため、曲線が完全な円形に保たれるのではなく引き伸ばされます。

円形のコーナーはどの角度から見ても同じように見え、アバター、バッジ、ボタンに適しています。

楕円形のコーナーは不均一に伸びており、丸薬の形のタグや非対称のヒーロー パネルなどの幅広いコンポーネントに適しています。

コーナーごとに 1 つではなく 2 つのスライダーを公開するジェネレーターを使用すると、スラッシュ構文の計算を手動で行うことなく、このペアを迅速に構築できます。

スクワクルとブロブスタイルの形状

Apple の iOS アプリ アイコン (EN)は、単純な角丸長方形ではありません。彼らは、一般にスクイクルと呼ばれる超楕円を使用します。角の半径はアイコンの幅の約 22% であり、単純な円弧ではなく連続した曲線が滑らかになっています。

標準の境界半径は、円弧または楕円弧のみを描画するため、それ自体で連続曲線を再現することはできません。

CSS ワーキング グループは、そのギャップに直接取り組んできました。 superellipse() 関数を含む新しい corner-shape プロパティ (EN)は、CSS Borders モジュール レベル 4 ドラフトで解決されました。既存の境界線半径ボックス内の曲線の形状を変更する、スクワクル、ベベル、スクープ、ノッチなどのキーワードを追加します。 MDN (EN) では現在、これを限定公開としてリストしているため、フォールバックなしで信頼するのはまだ安全ではありません。

.icon {
  border-radius: 22%;
  corner-shape: squircle; /* limited availability, needs a fallback */
}

それがすべてに到達するまで、真のブロブまたは有機的な形状を追求するチームは、通常、より多くの境界半径値を積み重ねるのではなく、2 つの回避策のいずれかに到達します。

1 つのルートは、SVG (EN) パスとしてシェイプを構築します。これにより、すべての曲線ポイントを完全に制御できます。

もう 1 つは、クリップパス ジェネレーターを通じてプレーンな CSS に保持し、通常の長方形のボックスから不規則なシルエットを切り取ります。

ブラウザによるボーダー半径とベンダープレフィックスのサポート

Border-radius は、現在利用できる最も広くサポートされている CSS3 プロパティの 1 つであり、最新のブラウザーの範囲には大きなギャップは残されていません。

現在のブラウザのサポート

現時点では、サポートは 10 年以上にわたって堅実です。

2026 年 8 月に StatCounter GlobalStats から取得された 使用可能 (EN)データでは、世界中で追跡されているブラウザ トラフィックの 97.26% で境界半径のパーセンテージ値がグローバルにサポートされているとされています。

このレベルのブラウザ間の互換性 (EN)が、現在、デフォルトでレガシー ブラウザ フォールバック モードをわざわざ提供しているジェネレーターがほとんどない理由です。

ベンダープレフィックス履歴

次の 3 つの異なる時代が存在します。

• Webkit 時代: 初期の Safari と Chrome のビルドが必要 -webkit-border-radius
• Mozilla 時代: Firefox の初期バージョンが必要 -moz-border-radius
• 現代: 現在のすべてのブラウザは、プレフィックスをまったく必要とせず、プレフィックスなしのプロパティを受け入れます。

デフォルトで両方のプレフィックス付き行を出力するジェネレーターは、ブラウザーが決して読み取らないデッド コードをスタイルシートに埋め込んでいます。

CSS 境界線半径ジェネレーターの使用方法

どのツールを使用しても、開いた特定のツールに関係なく、同じ短いシーケンスが続きます。

1. 単位 (px、%、または em) を選択し、角をリンクしたままにするか独立して移動するかを決定します。
2. スライダーを使用して各コーナーを調整するか、[垂直半径] タブに切り替えて楕円形にします。コーナーの図は、どの値がどのコーナーにマップされるかを示します。
3. ライブ プレビューを見て、レンダリングされた形状がイメージしたものと一致していることを確認します。小さいサイズでは数字だけでは欺瞞的な可能性があるため、アバター、ボタン、またはカードのコンテンツを交換して、実際のものと比較してテストしてください。
4. プロジェクトで使用する形式 (CSS、SCSS、CSS-in-JS、または Tailwind) で出力をコピーします。

プレビューの内容は人々が期待している以上に重要です。パーセンテージベースの半径は、正方形のアバターと幅広のカードではまったく異なります。

このワークフローは、通常のカード デザイン (EN)作業で常に使用されており、多くの場合、ブランドの視覚的言語に合わせて 4 隅の処理がわずかに異なる必要があります。

身につける価値のある習慣の 1 つは、エクスポートされたコードを本番環境に出荷する前に、CSS ミニファイアー (EN) を通じて実行することです。これにより、余分な空白や残りのプレフィックス付き行が捕捉されます。

CSS 境界線半径生成ツールの比較

ジェネレーター ツールは、並べて並べると、いくつかの認識可能なカテゴリに分類されます。

Chrome (EN) と Firefox DevTools ではどちらも、ルール パネルで境界線の半径の値をクリックし、水平にドラッグして変更できます。これにより、別のツールをまったく開かずに、簡単な 1 回限りの調整を行うことができます。

デザイン ソフトウェアは他のソフトウェアとは一線を画しています。すでに Figma 内で角を丸くしている (EN)場合でも、そこに表示されている半径の値を CSS に手動で入力するか、ハンドオフ中に読み取る必要があります。使用可能な宣言として自動的にはエクスポートされません。

多くのチームは、1 つで何でもできるアプリではなく、単一目的のツールの小さなスタックを保持しています。半径ジェネレータは、コンポーネントの残りのスタイルの CSS ボタン ジェネレータ (EN) などと自然に組み合わされます。

ほとんどの開発者は依然として、視覚的なステップよりも手書きの CSS を優先しています。 Devographics が実施した State of CSS 2024 調査 (EN)では、回答者の 60.9% が独自のデザインを CSS で直接実装していることがわかりました。コードに変換する前に別のアプリで設計しているのは 34.6% だけです。

ジェネレーターまたは手動 CSS: どちらを使用するか

CSS border-radius生成ツール は、非対称の複数値コーナーで有効です。

最も単純なケースでは、依然として手書きの CSS が有効です。記憶されている値を 1 つ入力するほうが、ブラウザのタブを開くよりも速いです。

手動 CSS は次の場合に最適に機能します。

• デザインでは、すべての角にわたって 1 つの均一な半径が必要です
• 正確な値はスタイル ガイドまたはトークン ファイルにすでに存在します。
• 変更は既存のルール内の 1 行の簡単な編集です。

ジェネレーターは次の場合にその役割を果たします。

• コーナーには両側で異なる値が必要です
• 楕円またはスラッシュ構文の値が含まれています
• 数値をコードにコミットする前に形状を確認する必要があります

プロダクションデザインシステムは、事前に値をトークンにロックすることで議論全体を回避する傾向があります。

Shopify の Polaris デザイン システム (EN) には、0px から始まり 2px および 4px まで上がる名前付きステップを持つパブリック境界半径トークン スケールが同梱されています。チームの誰も感覚で番号を選んだり、体幹の途中でスライダーに手を伸ばしたりしていません。

トークンが存在すると、実際の選択はジェネレーターか手動入力でなくなります。それはトークン対即興になります。

エクスポート形式: CSS、SCSS、およびユーティリティ クラス

適切なエクスポート形式は、どのボタンに「コピー」というラベルが付いているかではなく、コードベースの残りの部分がすでに期待している内容によって決まります。

CSS および SCSS 出力

プレーンな CSS 出力は、追加の手順を必要とせずにスタイルシートに直接取り込まれます。

SCSS 出力は、いくつかの具体的な点で異なります。

• 値を変数として保存し、コンポーネント間で再利用できます。
• ミックスインは、単一の入力から 4 つの隅のプロパティをすべて生成できます。
• ネストすると、コーナー ルールのスコープが親セレクターに限定されます。

すでに Sass ビルド パイプラインを実行しているチームは、SCSS 出力から実際のメリットを得ることができます。

何も持たないチームは、追加の構文を継承するだけで、とにかく同じプレーンな CSS に直接コンパイルし直すことになります。

ユーティリティクラスの出力

ユーティリティファーストフレームワークは、border-radius 値を生の宣言ではなくクラス名に変換します。

rounded-full は、その数値スケールの完全に外側に位置します。 Tailwind 独自のドキュメント (EN)では、それを calc(infinity * 1px) として定義しているため、錠剤の形状は、後ろに固定数値がなくても、任意の要素サイズで保持されます。

ユーティリティ クラスのアプローチを選択する人は、実際には、Tailwind (EN) と Bootstrap (EN) の命名規則のどちらかを選択することになります。どちらのフレームワークも、生の境界半径値の代わりに独自の丸めスケールを出荷します。

生の CSS のみを出力するジェネレーターは、どちらか一方を中心に標準化されたプロジェクトでは重要です。実際の作業は、ピクセル値を最も近いクラス名に手動でマッピングし直すことです。

境界半径ジェネレーターが適用されない場合

境界半径には、ジェネレーター、ドラッグ ハンドル、またはスライダーが押し越えることができない厳しい数学的上限があります。

複雑または有機的な形状

CSS の背景と境界線の仕様 (EN)では、隣接するコーナーの半径がボックスのスペースよりも広いスペースを要求した場合に何が起こるかを正確に定義しています。

隣接する 2 つの半径の合計がそのエッジの長さを超える場合、ブラウザは曲線が重なり合わなくなるまで、ボックス上のすべての半径を比例的に縮小します。

この 1 つのルールにより、 正方形要素の半径 100% の上限を視覚的な 50% に戻すことができ、折り畳まれた形状ではなくきれいな円が生成されます。

• 単一の対称カーブ: 自動的にキャップされ、常にきれいな円弧としてレンダリングされます。
• 複数のローブまたは凹面の形状: 境界半径の値が生成、生成または手書きされる範囲外

前に説明したスクワクルおよびブロブ スタイルの回避策は、境界半径ジェネレーターがまだ追いついていないためではなく、まさにこの上限が固定されているために存在します。

コンテナを単に丸くするのではなく、画像に切り込む必要があるシェイプの場合、CSS mask-image または SVG <clipPath> が、border-radius が停止する位置を選択します。

従来のブラウザの要件

最新のブラウザ スタック以外のレンダリング環境では、動作が異なります。

• 電子メール クライアント: border-radius は、電子メールを送信できますか (EN)データによると、追跡対象のクライアント全体で 68.29% の完全サポートと 14.63% の部分サポートにとどまっています。これは、最新のブラウザーが投稿したほぼ普遍的な数字を大幅に下回っています。
• Windows 上の Outlook: 2003 から 2019 までのバージョンは、border-radius を完全に無視し、代わりに VML RoundRect 要素を必要とする Word ベースのエンジンを通じて電子メールをレンダリングします。
• Yahoo Mail と AOL: このプロパティはサポートされますが、楕円の角に使用されるスラッシュ構文は削除されます。

これらはいずれも、前に説明したブラウザーのサポート数と矛盾しません。これは、ジェネレーターのライブ プレビューがシミュレートするために構築されたものではない別のレンダリング パイプラインです。

境界半径に関する一般的な間違いと修正

境界半径に関するバグのほとんどは、少数の常習犯に遡ります。

• 1 つの宣言で単位を混合する: 同じ短縮表記で px と % を組み合わせると、画面サイズ間で一貫性なくシフトするコーナーが生成されます。コンポーネントごとに 1 つのユニットを選択し、そのまま使用します
• オーバーフロー コントロールがありません: 内側に正方形の画像がある丸いコンテナは、親がオーバーフローを非表示に設定しない限り、四角い角が表示されます。
• 角の順序の間違い: 左上、右上、右下、左下の順序を忘れると、非対称のボックスの間違った側が丸められてしまいます。
• 残りのベンダー プレフィックス: 古いジェネレーターからスニペットをコピーすると、現在のブラウザーが読み取らない -webkit- 行と -moz- 行が依然として送信されます。

/* the overflow fix: children and background images follow the curve */
.thumb {
  border-radius: 16px;
  overflow: hidden;
}

ジェネレーターの出力を、二度見せずに本番ファイルに直接貼り付けることで、プレフィックスの残りの問題がコード レビュー後に解決されることがよくあります。

CSS beautifier (EN) を通じてエクスポートされたブロックを実行すると、プル リクエストに到達する前に、デッドラインがまず明確になります。

よくある質問：CSS border-radiusジェネレーター

境界線の半径と丸い角の違いは何ですか

「角の丸み」は視覚的な結果を表します。 Border-radius は、ボックスに表示される境界線があるかどうかに関係なく、ボックスを生成する特定の CSS プロパティです。デザイナーは「丸い角」と大まかに言い、境界線の半径、SVG パス、およびクリップパスの形状を同様にカバーします。

境界半径の値を Tailwind クラスまたはブートストラップ クラスに直接エクスポートできますか

このジェネレーターの Tailwind タブは構成エントリーを書き込みますが、ピクセル値を既存のユーティリティー・クラスに直接自動的にマップするツールはありません。 Tailwind と Bootstrap には固定丸めスケールが同梱されているため、任意の値を最も近いクラス (rounded-lg や .rounded-3 など) に手動で変換する必要があります。

レスポンシブデザインに必要な境界線半径ジェネレーターはありますか

いいえ。パーセンテージベースのボーダー半径はすでに要素自体の幅と高さに合わせてスケールされるため、ジェネレーターやメディアクエリの書き換えを行わなくても、単一の値がブレークポイント間で適応します。ジェネレーターは、パーセンテージを手動で計算するのではなく、視覚的に見つけることを高速化するだけです。

境界線の半径は背景画像に影響しますか、それとも要素のエッジにのみ影響しますか

Border-radius は、オーバーフローが非表示に設定されると、背景画像も含めてボックス内のすべてをクリップします。このオーバーフロー ルールがないと、ボックスの外縁は視覚的に丸くなりますが、背景画像や子要素の下には直角の角が表示されたままになります。

CSS border-radius生成ツール がコードをエクスポートした直後に何をすべきでしょうか?

CSS border-radius生成ツール のジョブは、値を渡した瞬間に終了します。次に何が起こるかによって、その数値が実際の設計システム内で保持されるか、次にファイルに触れる人によって書き換えられるかが決まります。

実際のコンテンツに対してテストせずにエクスポートされた値を受け入れることは、悪い取引です。 1 分を節約すると、ツールのプレースホルダー ボックス内では正しく表示され、実際の写真やボタンとはわずかにずれたコーナーが得られます。

3 つのステップにより、生成された数値が永続的な数値に変わります。

• プレースホルダーの形状ではなく、ライブ コンテンツに対して値をテストします。
• 素の数字ではなくデザイントークンにロックします。
• 次の編集で逆転しないようにコーナーの順序を記録します。

丸い角が実際のインターフェイス上に単独で存在することはほとんどありません。通常、その半径を ボックス シャドウ ジェネレーター と組み合わせることが、同じカードまたはボタンの次のスタイル決定になります。