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

CSSで角丸を作る

更新日：2026年9月29日 · 著者：サマン

角丸はカード、ボタン、アバター、画像の印象をやわらげます。このページはCSSジェネレーターを角丸のタブで開くので、すべての角をまとめて丸めることも、角ごとに形を整えることもできます。

例

ピクセルかパーセントか

ピクセル値なら、要素の大きさに関係なく同じカーブになり、ボタンやカードに向いています。パーセント値は要素に合わせて大きくなり、角ごとに幅と高さのそれぞれを基準に計算されるため、長方形ではカーブが楕円形になります。

関連ツール

角丸にした要素に影を付けるなら、ボックスシャドウジェネレーターをご覧ください。グラデーションで塗るならCSSグラデーションジェネレーターが使えます。