CSSボーダーレイディアスジェネレーター
わずかに丸いボタンから 有機的ブロブ まで、CSS3ボーダーレイディアスの全機能を使って作成。
100%無料 — 登録不要。
8制御ポイント
99%+ブラウザサポート
0登録不要
Simple
CSS Output:
border-radius: 20px; Element
Background
一般的な使用例
UIデザインでボーダーレイディアスが最も影響を与える場所
🔘
ボタン＆CTA
角丸ボタンはよりクリック可能でモダンに感じる。微妙な4pxから完全に丸いピルボタンまで。
👤
アバター画像
50%レイディアスを使った円形アバターはモダンUIの標準。正方形画像が即座に円に。
🃏
カード＆コンテナ
角丸カードはよりソフトで親しみやすい。標準値：8px、12px、16px。
🫧
ブロブ背景
ヒーローセクション、装飾要素、モダンなランディングページ用の有機的ブロブ形状。
CSSボーダーレイディアスを理解する
border-radiusプロパティは要素の外側ボーダーエッジのコーナーを丸める。ほとんどの人は10pxのようなシンプルな値を使うが、CSSは有機的で非対称な形状を作成できる驚くほど強力な8値構文を許可。
値構文オプション
- 1値:
border-radius: 10px;— 4つのコーナーすべて同じ - 2値:
border-radius: 10px 20px;— 左上/右下、右上/左下 - 4値:
border-radius: 10px 20px 30px 40px;— 左上から時計回り - 8値:
border-radius: a b c d / e f g h;— 水平/垂直レイディアスを独立して
ブロブの秘密：8値構文
スラッシュ（/）で水平と垂直のレイディアスを分けることで、各コーナーに非対称カーブを作成。これがモダンなブロブ形状の作り方—SVG不要！
CSS構文＆例
異なるボーダーレイディアススタイル用のコピペ可能なコード例
CSSStandard Corners
/* Uniform rounded corners */
.card {
border-radius: 12px;
}
/* Pill button */
.pill-button {
border-radius: 9999px;
}
/* Perfect circle */
.avatar {
width: 64px;
height: 64px;
border-radius: 50%;
}
/* Specific corners (TL, TR, BR, BL) */
.custom {
border-radius: 20px 8px 20px 8px;
}CSSBlob Shapes (8-Value)
/* Basic blob */
.blob {
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}
/* Smooth organic shape */
.organic {
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}
/* Animated blob */
.animated-blob {
animation: morph 8s ease-in-out infinite;
}
@keyframes morph {
0%, 100% {
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}
50% {
border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
}
}よくある質問
4値と8値構文の違いは？
4値は各コーナーのレイディアスを設定（左上、右上、右下、左下）。8値はスラッシュで水平と垂直のレイディアスを分け、非対称の有機的形状を可能に。
完璧な円を作成するには？
正方形要素（幅と高さが等しい）にborder-radius: 50%を設定。ピル/カプセル形状にはborder-radius: 9999pxを使用。
パーセンテージは使えますか？
はい！パーセンテージは要素の寸法に対して計算。水平パーセンテージは幅を使用、垂直パーセンテージは高さを使用。これがブロブ形状の仕組み。
ブロブ形状は何に使う？
ブロブ形状はヒーロー背景、装飾要素、抽象アート、堅いレイアウトに有機的でフレンドリーな雰囲気を追加するのに人気。SVGや画像不要！