◖
無料CSS ボーダー半径ジェネレーター
各コーナーを独立して制御できる、丸いコーナーを視覚的にデザインします。有機ブロブ形状の楕円 X/Y 構文をサポートします。
読み込み後はオフラインでも動作
border-radius: 20px 20px 20px 20px;
単位
主な用途
- 有機的なブロブ形状楕円形のX/Y構文を使用して、ヒーローセクションとイラストの独特なブロブ形状を作成します。
- カードとコンテナーの隅モダンUIデザインのカード、コンテナー、パネルの標準的な丸い隅。
- アバターとプロフィール画像の形状プロフィール写真に適切なコーナースタイルを作成します：円形、squircle、または丸い正方形。
- ピル、タグ、バッジ9999プリセットで完全に丸いピルボタン、タグ、バッジを構築します。
- 非対称コーナーデザインコーナー間の半径を混在させて、ブランドが認識できる、特徴的なカードとボタンの形状を作成します。
使い方
border-radiusジェネレーターはブラウザ内で完全に動作します — サーバー、ライブラリ、アップロードは一切ありません。Reactの状態とuseMemoを使ってCSSのborder-radius値の文字列をJavaScript内で直接構築し、それをライブのdiv要素のインラインスタイルとして適用することで、ブラウザ自体のCSSエンジンがリアルタイムに形状を描画します。
- 1スライダーが状態を書き込む各range入力は8つの数値状態変数のうち1つに書き込みます — 楕円モード用に水平方向の角の半径4つと垂直方向4つです。統一モードでは、すべての値を同時に同期させるsetAllヘルパーを介して8つすべてが1つのスライダーに集約されます。
- 2useMemoがCSS値を組み立てるuseMemoフックは、いずれかの角の値、単位（pxまたは%）、楕円トグルが変わるたびにborder-radius文字列を再計算します。標準モードでは4値の省略形を生成し、楕円がオンの場合は8値構文全体のためのスラッシュ区切りを追加します — 例：32px 20px 20px 32px / 20px 32px 20px 32px。
- 3ブラウザのCSSエンジンがプレビューを描画する計算された文字列は、普通のdiv要素にインラインのborderRadiusスタイルとして設定されます。ブラウザのレイアウトエンジンがすべての描画を行います — canvasもSVGもサードパーティの描画コードも一切ありません。
- 4Clipboard APIが出力をコピーするコピーをクリックすると、選択された形式トグルに応じて、CSS宣言（border-radius: ...;）または対応するTailwindの任意値クラス（rounded-[...]）でnavigator.clipboard.writeTextが呼び出されます。