Border Radius ジェネレーター
ビジュアル border-radius エディタ：均一モード（クイック角丸）、コーナー別モード（チャットバブル・タブ）、楕円モード（ブロブ — 横半径 ≠ 縦半径）。手で組みがちな形状のプリセットを多数。単位は `px`・`%`・`rem`。出力は最短の有効 CSS — 全コーナー同値なら 1 値、異なれば 4 値、楕円なら `h / v` フル構文。
—
プリセット
プレビュー
CSS
border-radius: 16px;使い方
- プリセットから始めるか、「均一」OFF でコーナー別編集。
- ブロブ形状には「楕円」をオンに（各コーナー 2 半径）。
- `border-radius: …` をコピーして CSS に貼付。
よくある質問
- 楕円半径はいつ役立つ？
- 主にイラストの有機的「ブロブ」形状で、コーナー毎に非対称な場合。標準 UI はほぼ均一か 4 値。
- px と % の違い？
- % は要素の幅・高さに対する相対 — 正方形に 50% で円、長方形に 50% で楕円。px は要素サイズに関係なく絶対値。
- 正方形でピルが変に見える。
- Pill = 999px は要素が横長前提。正方形では結局円になります。
- ブラウザ対応？
- 4 値 `border-radius` と楕円構文は 2010 年以降の全ブラウザ対応。どこでも安全。
関連ツール
画像角丸
画像に角丸、完全な円マスク、または角ごとの半径を適用 — 透明度のチェッカーボードでプレビュー、PNG または JPEG としてダウンロード。
画像 0 0
CSS 三角形ジェネレーター
純 CSS で 8 方向の三角形を生成 — border トリックまたは clip-path、ルールをコピーして貼付。
カラー 0 0
CSS clip-path ビルダー (円、楕円、多角形、Inset)
CSS `clip-path` プロパティのビジュアルビルダー — 形状を選択 (円、楕円、inset、多角形)、スライダーで数値調整、プレビュークリックで多角形の点を追加、貼り付け可能な CSS 宣言をコピー。10 種の形状プリセット (三角形、六角形、星、矢印、吹き出し、十字など) を内蔵。
カラー 0 0
CSS グラデーションジェネレーター
線形・放射状 CSS グラデーションを多段カラーストップでデザインし、コードをコピー。
カラー 0 0
CSS Box Shadow ジェネレーター
複数レイヤーで CSS box-shadow を視覚的にデザイン — リアルタイムプレビュー + CSS / Tailwind 出力。
カラー 0 0
CSS フィルタープレイグラウンド
blur・brightness・contrast・hue・sepia・invert など 9 種を視覚的に組み合わせ — CSS や Tailwind 任意値でコピー。
カラー 0 0