無料・登録不要
Border Radiusジェネレーター
各角の丸みを視覚的に調整
プリセット
CSSコード
border-radius: 20px;
各角の丸みを視覚的に調整
border-radius: 20px;
CSSのborder-radiusを視覚的に編集できる無料ツールです。四隅を個別に設定し、複雑な形状も直感的に作成。角丸ボタンやカード、ブロブ形状など、様々なデザインに対応します。
各角を独立して設定、非対称な形状も作成可能
水平・垂直を個別設定する高度な形状にも対応
設定値をワンクリックでCSSコードとしてコピー
ボタンやカードの角丸を微調整したいとき
スライダーで各角を個別に調整し、即座にプレビュー確認
8値ショートハンドの複雑なborder-radius値を書くのが面倒なとき
GUI操作だけで正確なCSS値を自動生成してコピー
有機的なブロブ形状やユニークな角丸を作りたいとき
プリセットから葉型・対角丸など10パターンをワンクリックで適用
シンプル（4値）またはアドバンス（8値）モードを選びます。
スライダーまたは数値入力で各角の丸みを調整します。
リアルタイムで更新されるプレビューで形状を確認します。
border-radiusプロパティをコピーして使用します。