角丸ジェネレーター

正方形の要素が完全な円になります。真の円にするには、要素の幅と高さが等しい必要があります。例えば `width: 100px; height: 100px; border-radius: 50%` のように指定します。50% のラジウスは四辺すべての中点で交わり、完全なカーブを作ります。正方形でない要素の場合、50% は楕円になります。要素の寸法によって横長または縦長になります。これは CSS で円形のアバター画像・丸ボタン・アイコンコンテナを作る最も一般的な方法です。

ボタンやバッジのような正方形でない要素に `border-radius: 9999px`（または `100px` のような大きな値）を使用します。ブラウザは自動的にラジウスを要素の短辺の半分にクランプするため、短辺が完全な半円になり、長辺はまっすぐのままになります。これにより、ほぼすべてのモダンなデザインシステムで見られる定番のピル型 CTA ボタンが作れます。`9999px` トリックは要素のサイズにかかわらず機能します。高さの半分を手動で計算する必要はありません。このジェネレーターの Pill プリセットでこのパターンを即座に適用できます。

ピクセル値は絶対値で、`12px` のラジウスは要素のサイズにかかわらず 12 ピクセルのままです。要素が拡大縮小してもコーナーサイズは固定されます。パーセント値は相対的で、`50%` は常に各辺の正確な中点までカーブし、要素に合わせてスケールする比例した形状を作ります。要素に合わせてスケールする円やピルのような形状にはパーセント（`50%`）を使用してください。カード・ボタン・入力欄など、コンテンツにかかわらず一貫したデザインシステム定義のコーナーサイズが必要な UI コンポーネントにはピクセルを使用してください。

標準の `border-radius` はコーナーを外側（凸型）にカーブさせることしかできません。チケット・タブ・吹き出しで使われる内向きの「ノッチ」または「切り込み」カーブ（反転または凹型コーナー）には、`border-radius` だけでは作れません。一般的な手法はラジアルグラデーションマスクです。`mask: radial-gradient(circle 20px at top left, transparent 98%, black) top left / 51% 51% no-repeat ...` を内側に切り込みを入れたい各コーナーに繰り返します。別の方法は、ページの背景色に塗りつぶした配置済み疑似要素（`::before`）に独自の外向き `border-radius` を与え、コーナーに重ねることで凹型を削り出しているように見せます。チケットのミシン目状の端には、片側に沿った繰り返しラジアルグラデーションマスクが有効です。つまり「反転ボーダーラジウス」は border-radius の値ではなくマスクのトリックであり、反転ボーダーラジウスジェネレーターを検索する際に知っておくと便利です。

個別コーナープロパティを使用します。`border-top-left-radius`・`border-top-right-radius`・`border-bottom-right-radius`・`border-bottom-left-radius` です。例えば `border-bottom-right-radius: 24px` は右下コーナーだけを丸め、他の 3 つはシャープなままにします。自由に組み合わせることもできます。`border-top-left-radius: 16px; border-bottom-right-radius: 16px` は対角線上に丸い形状を作ります。ショートハンドでは、2 つの値で対角コーナーペアを設定します。`border-radius: 16px 0` は左上と右下のコーナーを丸め、右上と左下はシャープなままにします。

左上から時計回りに：左上 → 右上 → 右下 → 左下の順です。`border-radius: 16px 8px 0 8px` は左上が 16px・右上が 8px・右下が 0・左下が 8px になります。これは `margin`・`padding`・`border-width` で使われる標準的な CSS ショートハンドの方向と一致します。2 値の場合、最初の値が左上と右下に適用され、2 番目の値が右上と左下に適用されます。3 値の場合、2 番目の値が右上と左下の両方に適用されます。1 値の場合は 4 つのコーナー全体に均一に適用されます。

はい — `<img>` 要素に直接 `border-radius` を適用します。円形アバターなら `img { border-radius: 50%; width: 100px; height: 100px; }` のように指定します。または、`overflow: hidden` を持つ `<div>` で画像をラップし、ラッパーに border-radius を適用することで、より多くのレイアウト制御が可能になります。このツールの画像アップロード機能を使って、CSS をコピーする前に実際の写真でラジウスがどう見えるかをプレビューしてください。これは、正確なクリップ形状がデザインに影響する円形アバタークロップ・メディアカードサムネイル・ギャラリーレイアウトを設計する際に特に便利です。

3 つのコーナーを大きな値に設定し、1 つをゼロにします。`border-radius: 50% 50% 50% 0` のように指定します。`transform: rotate(-45deg)` と組み合わせると、定番の地図ピンのしずく形状が作れます。ゼロにするコーナーを変えることで、しずくの向きを変えられます。`0 50% 50% 50%` は左向き、`50% 0 50% 50%` は右向きになります。ゼロのコーナーが尖った先端を作り、大きなラジウスの 3 つのコーナーが丸い本体を形成します。ロケーションマーカー・ポインター・イラスト風 UI の装飾アクセントに便利です。

スラッシュは各コーナーの水平ラジウスと垂直ラジウスを分離します。構文は `border-radius: [水平ラジウス] / [垂直ラジウス]` です。例えば `border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%` は、各コーナーに非対称な楕円カーブを持つ卵型の形状を作ります。このツールの Random Blob ジェネレーターはこの構文を使って有機的で非対称な形状を作ります。ヒーローセクションの背景・装飾用ブロブ・イラスト風デザイン要素として人気です。各コーナーで水平・垂直ラジウスの比率を変えることができます。

cssmatic.com のボーダーラジウスツールは機能的ですが古く、画像アップロード・ブロブ生成・プリセットライブラリが欠けています。css-tricks.com の解説記事は優れたドキュメントですが、インタラクティブなジェネレーターではありません。bennettfeely.com の clip-path メーカーは用途が重なりますが、border-radius ではなく clip-path を対象としています。UtiloKit のジェネレーターが提供するもの：完全クライアントサイド処理の画像アップロード付きライブプレビュー・形状プリセット（円形・ピル・カード・エッグ・ブロブ）・8 値スラッシュ構文を使ったランダムブロブ生成・px/% 単位切り替え・3 種類のコピー形式。広告なし・透かしなし・登録不要・サーバーへの送信なし。

いいえ — 画像はブラウザの File API のみを使用して読み込まれ、デバイスの外に出ることはありません。プレビュー要素はブラウザのメモリ内に完全に留まる `createObjectURL()` 呼び出しを使ってローカルで画像をレンダリングします。アップロードなし・サーバー処理なし・クラウドストレージなし。他のすべての機能についても同様のクライアントサイドアーキテクチャが適用されます。スライダー入力・CSS 生成・ブロブランダム化・クリップボードへのコピーはすべて、最初のページ読み込み後はネットワークリクエストなしで JavaScript で実行されます。画像とデザイン作業は完全にプライベートに保たれます。

`border-radius` は CSS トランジションとキーフレームアニメーションで完全にアニメーション可能です。ホバー時に 2 つの値を滑らかに補間するには `transition: border-radius 0.3s ease` を使用します。`@keyframes` で形状を継続的にモーフィングするには、`0` から `50%` へのアニメーションで正方形が円にパルスします。2 つのブロブ形状（異なる 8 値スラッシュ値）間のモーフィングは、ヒーロー背景で人気の流れるような有機的アニメーションを作ります。border-radius のアニメーションは毎フレーム再描画を引き起こすため、頻繁にアニメーションする要素には `will-change: border-radius` を使用してください。

`border-radius` は純粋に視覚的なもので、要素の描画外観をクリップしますが、レイアウトボックス・マージン領域・ポインターイベントのヒット領域は変わりません。見えなくなった角部分も依然クリック可能で、レイアウト上のスペースも占有しています。これはタッチインターフェースで重要です。円形ボタンはコーナーに正方形のクリック領域を持っています。ヒット領域を丸い形状に正確に合わせたい場合は、ポインターイベントもクリップする `clip-path: circle()` を使用してください。`box-shadow` は `border-radius` を正しく追従しますが、`outline` はほとんどのブラウザで追従しません。丸いフォーカスリングの代替として `box-shadow: 0 0 0 3px color` を使用してください。

はい — このツールは完全にレスポンシブで、あらゆる最新のモバイルブラウザで動作します。iPhone では Safari や Chrome で何もインストールせずに使用できます。Android では Chrome・Firefox・Edge がすべて対応しています。スライダーはサイズの適切なドラッグハンドルを持つタッチフレンドリーな設計です。画像アップロードはモバイルでネイティブファイルピッカーを使用し、カメラロールやファイルアプリから選択できます。CSS のクリップボードへのコピーは、すべての最新モバイルブラウザでサポートされている標準 Web Clipboard API 経由で動作します。ツール全体がクライアントサイドで動作するため、アプリのダウンロードなし・アカウント不要・データはどこにも送信されません。