⬭ CSS Border-Radiusジェネレーター

概要

このCSS Border-Radiusジェネレーターは、無料でオフライン対応の一つのツールに3つの編集モードを搭載しています。シンプルモードは4つの角を一括調整、角ごとモードは各角を個別に微調整、楕円モードは各角の水平・垂直の半径を独立設定でき、CSS border-radius省略構文のフル機能を活用できます。ライブSVG図が変更をリアルタイムで反映し、ブロブランダマイズボタンは暗号論的ランダムアルゴリズムで現代UIデザインに人気の有機的なブロブ形状を生成します。すべてブラウザ内で完結するため、デザインデータは完全にプライベートに保たれ、インターネット接続なしでも動作します。

使い方

1. コントロールパネル上部のボタンで、シンプル（全角）、角ごと、楕円（x/y別半径）のいずれかのモードを選択してください。
2. スライダーをドラッグするか、数値入力フィールドに直接値を入力して各角の半径を設定してください。ライブプレビューとSVG図がリアルタイムで更新されます。
3. 「ブロブランダマイズ」をクリックすると、独立した楕円半径を使ってランダムな有機的ブロブ形状を生成します。装飾用UI要素やヒーロー背景に最適です。
4. 出力ボックスで生成されたCSS省略構文を確認してください。同じ値は自動的に最短の有効な構文に圧縮されます。
5. 「CSSをコピー」をクリックしてコードをクリップボードにコピーし、スタイルシートやデザインツールに直接貼り付けてください。

よくある質問

このCSS Border-Radiusジェネレーターは完全無料ですか？

はい、アカウント・サブスクリプション・隠れた制限なしで100%無料です。ページを開いてすぐにborder-radius CSSの生成を始められます。

このツールはオフラインやインターネット接続なしでも使えますか？

はい。ツールはすべてブラウザ内で動作し、サーバーへの通信は一切ありません。ページが読み込まれた後はインターネットを切断しても引き続き使用でき、最後の設定もブラウザにローカル保存されます。

デザインデータはプライベートに保たれますか？

完全にプライベートです。データがブラウザの外に出ることは一切なく、アップロードも、入力内容の分析も、サーバー保存もありません。すべてあなたのデバイス内で完結します。

楕円モードとは何ですか？

楕円モードでは4つの各角に水平(x)と垂直(y)の半径を個別に設定でき、スラッシュ記法を使ったCSS border-radius完全構文を生成します。例：border-radius: 40% 20% / 20% 40%。シンプルモードや角ごとモードでは作れない非対称・卵型の形状を実現できます。

「ブロブランダマイズ」ボタンは何のためにありますか？

ブロブランダマイズは暗号論的ランダムアルゴリズムを使い、8つの角・軸の組み合わせすべてにランダムな楕円半径を割り当てて有機的で不規則な形状を生成します。現代のランディングページ、アバター、装飾背景でよく見られる流動的なブロブ形状をワンクリックで作成するのに最適です。