CSS border-radiusジェネレーター

角丸ジェネレーターとは？

各角の半径を個別に設定でき、楕円の角には水平と垂直で異なる半径を、pxまたは%で指定することもできます。ツールは形状をプレビューし、同等の最短の border-radius 省略記法を書き出します。

角丸ジェネレーターの使い方

1. プリセット（角丸、ピル、円、ブロブ、リーフ、チケット）を選ぶか、自分で値を設定します。
2. 単位（pxまたは%）を選び、X/Yの半径を別々にしたい場合は楕円の角（X/Y を個別に指定）を有効にします。
3. 各角（左上、右上、右下、左下）を調整します。すべての角を連動にチェックを入れると、まとめて変更できます。
4. プレビュー設定で幅、高さ、色を変えて、自分のサイズでの形を確認します。
5. CSSコードをコピーします。

例

Unit %, elliptical: top-left 30/30, top-right 70/30, bottom-right 70/70, bottom-left 30/70

border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

角丸ジェネレーターを使うべき場面

角丸のカード、ピル、アバター、純粋なCSSで作る有機的なブロブ形状に使います。パーセントは要素に応じて拡縮します（正方形で50%なら円になります）。任意の多角形や直線的に切り取った形にはClip Path Generatorを、多くの点を持つ複雑な有機的形状にはSVG Blob Generatorを使ってください。

角丸ジェネレーターの仕組み

角は、CSSの要求どおり、左上、右上、右下、左下の順に並べられます。4つの値の各グループは、標準的な省略記法のルールで短縮されます。4番目の値は2番目と等しければ省かれ、3番目は1番目と等しければ省かれ、2番目は1番目と等しければ省かれます。楕円の角では、垂直半径がスラッシュの後ろに続きます（h / v）。すべての垂直半径が対応する水平半径と等しい場合は、スラッシュ以降は省略されます。

一般的な使用例

• ✓ ピル型のボタンとタグ
• ✓ 円形のアバター
• ✓ 8値の楕円半径による有機的なブロブ画像
• ✓ チケットやリーフ形のカード
• ✓ 非対称な吹き出しの角

よくある質問

他のカテゴリを見る