Border Radius ジェネレーター

このツールとは？

border-radiusは要素の角を丸めるCSSプロパティです。手書きすると左上・右上・右下・左下という決まった順序で4つの値を書く必要があり、特に4つの角が異なる場合は順序を間違えやすいです。

このツールなら覚える必要はありません。スライダーを動かすとライブプレビューで角が丸くなり、生成されたコードボックスで正確なCSSを確認できます。ロック切り替えひとつで、均一な半径（4つの角が同じ、最も一般的なケース）と、4つの独立したスライダー（有機的で非対称な形）を切り替えられます。

なぜこれを使うのか？

• ドラッグするだけで即座にプレビューが更新——CSSを編集して再読み込みする必要はありません。
• 「全ての角に同じ半径」という一般的なケース向けのワンクリックロック。解除すればピル型ボタンや吹き出し、ブロブ形も作れます。
• 4つの角が同じ場合は省略した単一値、異なる場合は完全な4値を出力——どちらもそのままコピペ可能です。
• すべてブラウザ内で完結。入力した内容はどこにも送信されません。
• 無料、登録不要、モバイルでも動作します。

使い方

1. 「4隅をロック」にチェックを入れたまま、いずれかのスライダーをドラッグしてボックス全体に均一な半径を設定します。
2. ロックを外すと各角を個別に制御できます。ピル形、しずく形、非対称なカードに便利です。
3. 各スライダーを調整すると、プレビューボックスがリアルタイムに更新されます。
4. コードボックスから生成されたCSSをコピーして、スタイルシートに貼り付けます。

例

入力

左上: 40px、右上: 8px、右下: 40px、左下: 8px

出力

border-radius: 40px 8px 40px 8px;

このように対角が異なる設定にすると、葉っぱや花びらのようなシルエットになります。カードやバッジのデザインでよく使われる効果です。

pxと%、どちらを使うべき？

このジェネレーターはピクセル値を出力します。ボタンやカード、入力欄など、要素のサイズに関係なく固定で予測可能な角丸を使いたいほとんどのUI作業では、これがデフォルトとして適切です。

パーセントは挙動が異なります——要素自身の幅と高さに対する相対値なので、正方形の要素に50%を指定すると完全な円になり、正方形でない要素では楕円になります。この効果（アバターやコンテナに合わせて拡大縮小するブロブ形）が欲しい場合は、生成されたCSSのpx値を手動で%に置き換えてください。例えばborder-radius: 50%はどんな正方形も円に変えます。

よくあるborder-radiusのパターン

• 角丸カード：4つの角を同じにし、UIコンポーネントではおおよそ8〜16px。
• ピル型ボタン：半径を要素の高さの半分に設定するか、9999pxを使えば高さに関係なく完全なピル形にクランプされます。
• 円形アバター：正方形（幅と高さが同じ）の要素にborder-radius: 50%を指定。
• 吹き出し：3つの角を丸め、1つの角は直角のまま——3つのスライダーを高くし、1つを0にします。
• 葉っぱ/花びら形：対角を同じにし、隣り合う角を変える——例えば左上と右下を大きく、右上と左下を小さくします。

シャドウとの組み合わせ

角丸単体で使われることは少なく、カードやボタンには奥行きを出すためのシャドウも必要になることが多いです。Box Shadow ジェネレーターでドロップシャドウを調整し、生成された2つのCSSを同じ要素に適用してみてください。

→ Box Shadow ジェネレーター · 単位変換ツール

よくある質問