border-radius: 16px 16px 16px 16px;
width: 200px;
height: 200px;

無料のオンライン境界線半径生成ツール — CSSビジュアルエディタ

カスタムCSSのborder-radius値をビジュアルで作成。丸い角、薬丸ボタン、オーガニックなブロブ、創造的な形状をライブプレビューと即時CSS出力でデザイン。

境界線半径生成ツールとは？

境界線半径生成ツールは、ウェブデザイナーがCSSのborder-radius値を手動でピクセルまたはパーセンテージ値を計算することなく作成するためのビジュアルツールです。数値を入力してブラウザをリフレッシュする代わりに、スライダーを調整し、形状がリアルタイムで変化するのを確認できます。

CSSのborder-radiusプロパティは、要素の角を丸くします。これは最も汎用性のあるCSSプロパティの一つで、微妙な丸みを帯びた角から複雑なオーガニックなブロブ形状まで、すべて作成可能です。

この境界線半径生成ツールの使い方

1. プリセットを選択 — ラウンド、薬丸、ブロブ、葉、ドロップ、モーフ形状から開始
2. スライダーを調整 — 各角を個別に調整するか、リンクさせることも可能
3. サイズを設定 — 要素の幅と高さに合わせて変更
4. 色をカスタマイズ — ボックスの色とプレビュー背景を設定
5. CSSをコピー — コピーボタンをクリックし、スタイルシートに貼り付け

主な機能

機能	メリット
各角の個別制御	独自の形状を作成するために各角を個別に設定可能
角のリンク/アンリンク	一様な角とカスタム角の切り替え可能
6つの形状プリセット	よく使われるborder-radiusパターンで素早く開始可能
幅と高さの制御	実際の要素のサイズに合わせて変更可能
ライブプレビュー	調整時に形状が即時更新
クリップボードへのコピー	1クリックでCSSを出力可能

CSS境界線半径の理解

構文

border-radiusプロパティは最大4つの値を受け取り、それぞれ角に適用されます：

border-radius: top-left top-right bottom-right bottom-left;

値のパターン	適用される角
16px	すべての角に同じ
16px 8px	左上 + 右下 / 右上 + 左下
16px 8px 4px	左上 / 右上 + 左下 / 右下
16px 8px 4px 2px	各角を個別に設定

ピクセルとパーセンテージ

• ピクセル (px)：要素のサイズに関係なく固定された角半径。
• パーセンテージ (%)：要素のサイズに相対的な値。正方形で50%とすると完全な円が作成され、長方形では楕円が作成されます。

円と薬丸ボタンにパーセンテージを使用する

border-radius: 50%は、幅と高さが等しい場合に完全な円を生成します。薬丸ボタンには、大きなピクセル値（例：999px）を使用します。これにより、要素のサイズに関係なく、常に短い辺の半分を超える半径が保証され、完全な丸みが作成されます。

シェイププリセットの比較

プリセット	値	使用ケース
ラウンド	16px均等	カード、モーダル、画像
薬丸	999px均等	ボタン、タグ、バッジ
ブロブ	60px 40px 70px 30px	装飾要素、ヒーローセクション
葉	0 100px 0 100px	オーガニックなUI要素、装飾的なディバイダー
ドロップ	0 100px 100px 0	ツールチップ、コールアウト、ポインター
モーフ	30px 70px 50px 80px	抽象的な形状、背景

実際の使用例

ボタンのスタイル設定

border-radius: 999pxを使用して薬丸ボタンを作成し、現代的でフレンドリーな見た目を実現します。これは多くのデザインシステムで使用されています。

カードコンポーネント

8–16pxのわずかな丸みで、カードのエッジをソフトにし、視覚的な階層を作成しながらも見栄えを損なわない。

プロファイルアバター

正方形の画像にborder-radius: 50%を適用して、ソーシャルアプリやダッシュボードでよく使われる円形のアバターを作成。

装飾的なブロブ

大規模な背景要素に非対称な半径値を適用して、現代的なウェブデザインで人気のあるオーガニックなブロブ形状を生成。

カスタムツールチップ

8px 8px 8px 0などの混合値を使用して、トリガー要素を指す1つの鋭い角を持つツールチップを作成。

境界線半径の改善のヒント

ヒント	説明
一貫性を保つ	デザインシステム全体で同じ半径を使用（例：8pxは小、16pxは大）。
相対単位を使用する	リスポンシブな円には50%ではなく固定ピクセル値を使用。
薬丸ボタンには大きな値を使用	任意の要素に完全な丸みを保証するために9999pxまたは999pxを使用。
異なる角にリンクしない	非対称な角で興味深いユニークな形状を作成。
コンテンツに注意	過度な丸みがテキストや内部のコンテンツを切り取らないように。
モーションと組み合わせる	カスタム半径の要素を回転またはスケールして、さらに創造的な形状を生成。

よくある質問

境界線半径が要素より大きい場合どうなりますか？

ブラウザは値を短い辺の半分に制限します。たとえば、60pxの高さのボタンにborder-radius: 999pxを適用すると、実質的に30pxとなり、完璧な薬丸形状が作成されます。

水平と垂直の半径を別々に設定できますか？

はい。border-radiusの略記法は別の構文をサポートしています：border-radius: 8px 8px 8px 0などの混合値を使用して、トリガー要素を指す1つの鋭い角を持つツールチップを作成。

ツールはモバイルでも使用可能ですか？

はい、このツールはリスポンシブで、すべてのデバイスで使用可能です。