🔘 CSS 角丸（border-radius）生成ツール

四隅の半径をそれぞれスライダーで調整し、プレビューで確認しながら border-radius の CSS を生成するツールです。px・％単位と四隅の同時調整に対応しているので、ボタンやカード、画像の角丸を整える開発者に便利です。

使い方

1. 各コーナーのスライダーで半径を調整します。
2. px または ％ 単位を選び、必要なら「四隅をまとめて調整」をオンにします。
3. プレビューボックスで形を確認します。
4. 生成された border-radius コードをコピーして使います。

よくある質問

px と ％ はどう違いますか？

px は固定の半径で、％ は要素の大きさに比例した半径です。正方形に 50％ を指定すると、完全な円になります。

四隅の値がすべて同じ場合、コードはどう出ますか？

四つの値が同じなら border-radius: 16px; のように1つの値で簡潔に出力され、異なる場合は四方向の値を順番に表記します。

入力した値はサーバーに送信されますか？

いいえ。プレビューとコード生成はすべてブラウザ内だけで行われ、サーバーに送信されることはありません。