⬜
border-radius,
CSS border-radius ジェネレーター
8つの値をGUIで操作してblob形状も生成。
リアルタイムプレビュー＋CSSコード即コピー。
🎛️
8つの値を個別操作
4角×水平/垂直の8パラメータをGUI調整
🫧
Blob形状対応
有機的なblob/不規則形状も簡単に作成
📋
CSSコード即コピー
生成コードをワンクリックでコピー
プレビュー
プリセット
水平方向 (Horizontal)
垂直方向 (Vertical)
生成コード
about,
概要
CSS border-radiusジェネレーターは、CSSのborder-radiusプロパティの8つの値（4角×水平/垂直）をGUIで直感的に操作し、有機的なblob形状やユニークな角丸をリアルタイムにプレビューできるツールです。
通常の角丸だけでなく、border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%のような複雑なblob形状も簡単に作成可能。プリセットから素早く開始でき、スライダーで微調整できます。
すべての処理はブラウザ内で完結します。外部サーバーへの通信は一切ありません。
how to,
使い方
STEP 1
プリセットを選ぶ
円・葉っぱ・しずく・Blobなどのプリセットから基本形状を選択して素早くスタートできます。
STEP 2
スライダーで微調整
水平・垂直それぞれ4角のスライダーで形状を自由に調整。プレビューがリアルタイムで更新されます。
STEP 3
CSSをコピー
「コピー」ボタンで生成コードをクリップボードにコピーしてプロジェクトに貼り付けます。
glossary,
用語集
- border-radius
- CSSプロパティ。要素の角を丸くする。4つの角に個別の値を設定可能。px・%で指定できる。
- 水平半径 / 垂直半径
- border-radiusの「/」前後で指定する楕円の半径。水平方向と垂直方向を独立して制御できる。
- blob（ブロブ）
- 不定形の有機的な形状。8つの値を非対称に設定することで作成可能。ヒーロー背景装飾に人気。
- clip-path
- 要素の表示領域を切り抜くCSSプロパティ。border-radiusより複雑な形状に対応するが記述が複雑。
- ショートハンド
- border-radius: 10px 20px 30px 40px のように1行で4角を指定する記法。「/」で水平/垂直を分離。
- 論理プロパティ
- border-start-start-radiusなどのLTR/RTL対応プロパティ。国際化対応が必要な場合に使用。
faq,
FAQ
- Q.8つの値とは何ですか？
- border-radiusは4角それぞれに水平半径と垂直半径を持ち、合計8つの値を個別に設定できます。border-radius: A B C D / E F G H という形式です。
- Q.blob形状は何に使えますか？
- ヒーローセクションの背景装飾、プロフィール画像のマスク、CTAボタンのユニークな形状などに使えます。
- Q.データはサーバーに送信されますか？
- いいえ。すべてブラウザ内のCSS文字列生成で完結します。外部通信はありません。
- Q.IE11に対応していますか？
- border-radiusはIE9以降で対応しています。ただし「/」を使った楕円指定はIE9以降で対応。
- Q.SassやLessでも使えますか？
- 生成されるのは標準のCSSプロパティのため、Sass/Less/Stylusでもそのまま使用可能です。
use cases,
活用シーン
🎨
ボタン・カードの角丸デザイン
ユニークな形状のボタンやカードコンポーネントのデザインに。プリセットから素早くスタートできます。
🫧
blob背景装飾
ランディングページのヒーローセクションの有機的な背景装飾として活用できます。
📸
プロフィール画像マスク
通常の円や四角以外のユニークな形状で画像をマスクするアイデアの探索に。
🎓
CSSの学習・実験
border-radiusの動作を視覚的に理解するための学習ツールとして活用できます。