CSS角丸ジェネレーター（border-radius）

CSS角丸（border-radius）について

要素の角を丸めるCSSプロパティ border-radius のコードを、プレビューしながら作成できます。4隅を個別に指定でき、すべて同じ値なら短縮形（1値）でも出力。ボタンやカード、画像の角丸デザインに。生成したコードをコピーしてCSSに貼り付けてください。

よくある質問

4隅を別々にできる？

はい。左上・右上・右下・左下を個別に指定できます。同じ値なら自動で短縮形にします。

%指定はできる？

本ツールはpx指定です。border-radius: 50%; は円・楕円になりますが、ここではpxでの角丸を扱います。

入力内容は送信されますか？

いいえ。すべてブラウザ内で処理されます。