CSS角丸（border-radius）ジェネレーター
左上・右上・右下・左下の角丸値と単位を指定して、CSSのborder-radius宣言コードをすばやく作成できるオンラインツールです。
ツールを実行
CSSのborder-radiusプロパティを簡単に生成できるツールです。要素の左上、右上、右下、左下の4箇所の角丸の数値を個別に指定でき、pxや%などの任意の単位を付与したCSS宣言文を出力します。4つの角すべてに同じ値を設定して均一な角丸を作成することも、角ごとに異なる数値を入力して非対称なデザインを作成することも可能です。数値を省略した場合は初期値として各角に10、単位にpxが自動的に適用されます。ゼロを指定すれば直角のまま維持できます。Web制作やUIデザインのスタイリング作業において、CSSコードの記述や調整をスムーズに行う際にご活用いただけます。
使い方
- 左上、右上、右下、左下の各角丸の数値を入力します（未入力の場合は初期値10が適用されます）。
- 使用する単位（pxや%など）を入力します（未入力の場合はpxになります）。
- 実行すると、結果欄に指定した数値と単位を反映したCSSのborder-radius宣言文が表示されます。
- 表示されたコードをコピーして、スタイルシートに貼り付けて使用します。
使用例
- 均一な角丸：4箇所の角に「8」、単位に「px」を指定すると、結果欄に `border-radius: 8px 8px 8px 8px;` が出力されます。
- 非対称な角丸：左上に「20」、右上に「0」、右下に「20」、左下に「0」、単位に「px」を指定すると、結果欄に `border-radius: 20px 0px 20px 0px;` が出力されます。
よくある質問
単位にはどのような文字列を指定できますか？
pxや%のほか、remやemなどCSSで有効な単位テキストを指定して出力できます。
特定の角だけ丸みをなくしたい場合はどうすればよいですか？
丸みをつけたくない角の入力欄に「0」を指定すると、その角は直角として出力されます。
値を空欄のまま実行した場合はどうなりますか？
角丸の数値には初期値「10」、単位には初期値「px」が自動的に適用されてコードが生成されます。