CSS Border Radius Generator

概要

• 4隅（左上・右上・右下・左下）の角丸の半径を指定するだけで、CSSのborder-radiusプロパティを生成するツールです。
• プレビューで角丸の見た目をその場で確認しながら、半径を調整できます。
• 4隅が同じ値の場合は単一値のショートハンド（例: `border-radius: 8px;`）、異なる場合は4値のショートハンド（例: `border-radius: 8px 16px 24px 32px;`）を生成します。

使い方

1. 「4隅を連動させる」が有効な状態で「左上（px）」を入力すると、4隅すべてに同じ値が適用されます。
2. 隅ごとに異なる値にしたい場合は「4隅を連動させる」を無効にし、各隅の値を個別に入力します。
3. 「CSSを生成する」ボタンをクリックすると、プレビューとborder-radiusを含むCSSが表示されます。

入力例・出力例

左上8px / 右上16px / 右下24px / 左下32px

border-radius: 8px 16px 24px 32px;

利用シーン

• カードやボタン、モーダルなどのUI要素に使う角丸の値を、プレビューを見ながら調整する
• 左右非対称・上下非対称な角丸（例: メッセージバブルの吹き出し）のCSSを組み立てる
• デザインカンプで指定された角丸の値を、そのままCSSプロパティとして書き出す

よくある質問

注意点

• 角丸の半径は0〜500pxの範囲で指定できます。
• 生成されるのは円形の角丸（水平・垂直で同じ半径）のみです。楕円形の角丸は生成後のCSSを手動で編集してください。