このツールに問題がありますか?

「CSS Border Radius Generator Online」について

このツールは視覚プレビューと共に border-radius を組み立てます。コーナーごとの個別コントロールで非対称な形状を、パーセント指定で有機的なブロブを、よくあるプリセット(角丸/ピル/円)から選ぶことも可能。

border-radius は要素の角を丸めます。単純な均一丸めだけでなく、楕円半径、コーナー別指定、非対称パーセントを使えば、イラストや装飾で使う有機形状も作れます。

ボタン、カード、画像、コンテナなど、あらゆる CSS 文脈で利用可能。スタイルの好みに応じてショートハンド/コーナー別の長い記法でコピーできます。

このツールの使い方

4 隅の border-radius 値を組み立てる手順

  1. 各隅を設定

    「Top-left」「Top-right」「Bottom-right」「Bottom-left」はそれぞれ角の半径(px)。順序は CSS ショートハンドに従い、左上から時計回り。

  2. 「実行」

    結果は `css` のみ:`<tl>px <tr>px <br>px <bl>px`。`border-radius:` の値として貼り付け。4 値が同じなら 1 値に短縮できますが、本ツールは常に 4 値形式を出力します。

  3. 非対称テクニック

    違いをつけた角でよくある UI 形状:チャットバブルは 1 つだけ 0(例:`12 12 12 0`)、タブは下 2 つを 0、ピルボタンは左右に巨大値・上下 0 — または単純に大きな等値 `9999` を全体に。

  4. 楕円半径

    CSS は角ごとの楕円半径も `tl-x/tl-y`(`12px/24px` など)でサポートします。本ツールは円形(単値)のみ出力 — 楕円が必要なら手で編集してください。