ビジュアルで直感的にCSS border-radiusを設計できるツールです。シンプルな角丸からピル・円・ブロブ・有機的なシェイプまで、プリセットとスライダーで自由に生成。CSSコードをワンクリックでコピーできます。
プリセット
プレビュー
コントロール
<!-- 単位切り替え -->
<div class="br-unit-toggle">
<button class="br-unit-btn active" data-unit="px">px</button>
<button class="br-unit-btn" data-unit="%">%</button>
</div>
<!-- リンクトグル -->
<div class="br-link-row">
<button class="br-link-btn active" id="br-link-btn">
<svg viewBox="0 0 20 20"><path d="M10.293 3.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 9H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414zM3 14a1 1 0 100 2h14a1 1 0 100-2H3z"/></svg>
コーナーを連動
</button>
<span id="br-link-label" style="font-size:12px;color:#6b7280;">全コーナーが同時に変わります</span>
</div>
<!-- コーナースライダー -->
<div class="br-corner-grid" id="br-corner-grid">
<!-- 左上 -->
<div class="br-corner-block" id="br-block-tl">
<label>左上</label>
<div class="br-slider-row">
<span>H</span>
<input type="range" id="br-tl-h" min="0" max="200" value="0">
<input type="number" id="br-tl-h-n" min="0" max="200" value="0">
</div>
<div class="br-slider-row" id="br-tl-v-row" style="display:none;">
<span>V</span>
<input type="range" id="br-tl-v" min="0" max="200" value="0">
<input type="number" id="br-tl-v-n" min="0" max="200" value="0">
</div>
<label class="br-elliptic-toggle"><input type="checkbox" id="br-tl-ell"> 楕円</label>
</div>
<!-- 右上 -->
<div class="br-corner-block" id="br-block-tr">
<label>右上</label>
<div class="br-slider-row">
<span>H</span>
<input type="range" id="br-tr-h" min="0" max="200" value="0">
<input type="number" id="br-tr-h-n" min="0" max="200" value="0">
</div>
<div class="br-slider-row" id="br-tr-v-row" style="display:none;">
<span>V</span>
<input type="range" id="br-tr-v" min="0" max="200" value="0">
<input type="number" id="br-tr-v-n" min="0" max="200" value="0">
</div>
<label class="br-elliptic-toggle"><input type="checkbox" id="br-tr-ell"> 楕円</label>
</div>
<!-- 右下 -->
<div class="br-corner-block" id="br-block-br">
<label>右下</label>
<div class="br-slider-row">
<span>H</span>
<input type="range" id="br-br-h" min="0" max="200" value="0">
<input type="number" id="br-br-h-n" min="0" max="200" value="0">
</div>
<div class="br-slider-row" id="br-br-v-row" style="display:none;">
<span>V</span>
<input type="range" id="br-br-v" min="0" max="200" value="0">
<input type="number" id="br-br-v-n" min="0" max="200" value="0">
</div>
<label class="br-elliptic-toggle"><input type="checkbox" id="br-br-ell"> 楕円</label>
</div>
<!-- 左下 -->
<div class="br-corner-block" id="br-block-bl">
<label>左下</label>
<div class="br-slider-row">
<span>H</span>
<input type="range" id="br-bl-h" min="0" max="200" value="0">
<input type="number" id="br-bl-h-n" min="0" max="200" value="0">
</div>
<div class="br-slider-row" id="br-bl-v-row" style="display:none;">
<span>V</span>
<input type="range" id="br-bl-v" min="0" max="200" value="0">
<input type="number" id="br-bl-v-n" min="0" max="200" value="0">
</div>
<label class="br-elliptic-toggle"><input type="checkbox" id="br-bl-ell"> 楕円</label>
</div>
</div><!-- /.br-corner-grid -->
</div><!-- /.br-panel -->
生成されたCSS
border-radius: 0;
使い方
- プリセットを選んでシェイプのベースを決める。または、スライダーをゼロから調整する。
- px / % を切り替え — パーセントは要素サイズに対する相対値、ピクセルは絶対値。
- コーナー連動をオフにすると、各コーナーを独立して設定可能。
- 楕円チェックを入れると水平・垂直の半径を個別指定でき、有機的なフォルムに。
- プレビューサイズを変えてアスペクト比が変わったときの見た目を確認。
- CSSをコピーしてスタイルシートに直接貼り付け。
早見表: border-radius の書き方
| 値 | 意味 |
|---|---|
border-radius: 8px | 全角が同一 |
border-radius: 8px 16px | TL+BR / TR+BL |
border-radius: 8px 16px 24px 32px | TL TR BR BL（時計回り） |
border-radius: 40% 60% / 60% 40% | 楕円（水平 / 垂直） |
関連ツール
ボックスシャドウを生成 → CSS Box Shadow ジェネレーター グラデーションを作成 → CSS グラデーションジェネレーター Flexboxレイアウトを構築 → CSS Flexbox ジェネレーター