角丸生成
CSSのborder-radiusプロパティを作成します
入力とオプション
クイックプリセットと例
ブラウザで動作します。入力内容はこのデバイス内に留まります。
結果
値を入力すると結果が表示されます。
角丸生成について
無料のCSS角丸ジェネレーターを使えば、あらゆるHTML要素の角丸を視覚的に自由に調整できます。4つの角を個別に調整することも、すべてを連動させることもでき、単位はpx、%、em、remから選べます。結果はライブプレビューにすぐ反映されます。
角丸はモダンなウェブデザインに欠かせない要素です。カードや入力欄の控えめな4pxの丸みから、アバター用の50%の完全な円まで、border-radiusプロパティはインターフェースの印象を左右します。このツールなら、当てずっぽうでブラウザを何度も更新しなくても、必要な値を簡単に見つけられます。
正方形、円、ピル型、しずく型、有機的な形など10種類のプリセットの形を用意しているほか、ランダム生成で自由に発想を広げることもできます。出力は、CSSのショートハンド、角ごとの個別プロパティ、そのまま使えるCSSクラス、おおよそのTailwind CSS相当の記述など、複数の形式で提供されます。
主な機能
- 左上、右上、右下、左下の各角を個別に調整可能
- 角の連動を切り替えて、4つの角すべてに同じ半径を一括で適用
- レスポンシブデザイン向けに4つの単位に対応: ピクセル(px)、パーセント(%)、em、rem
- 要素のサイズ(100-300px)を変更できるリアルタイムプレビューと、色を自由に選べるカラーピッカー
- 10種類のプリセット: 正方形、角丸、円、ピル型、上側を丸く、下側を丸く、左側を丸く、右側を丸く、しずく型、有機的な形
- 各角の正確な半径を示す、視覚的な角の値インジケーター
- 発想や試行に役立つランダム半径ジェネレーター
- 複数のCSS出力形式: ショートハンド、個別プロパティ、CSSクラス、Tailwind CSS相当の記述
- ワンクリックでクリップボードにコピーし、すぐにプロジェクトで使用可能
- 範囲表示付きのスライダーで、値を直感的に調整
角丸生成の使い方
- 単位を選択: 固定サイズならpx、レスポンシブな拡大縮小なら%、文字サイズに基づくサイズ指定ならemまたはremを選びます。
- 角の値を調整: スライダーで各角の半径を個別に設定するか、「すべての角を連動」を有効にして均一な丸みにします。
- プリセットを試す: 円、ピル型、しずく型など10種類のプリセットのいずれかをクリックすると、よく使う設定をすぐに適用できます。
- 結果をプレビュー: サイズと色を変更できるライブプレビューで、border-radiusの見た目をそのまま確認できます。
- CSSをコピー: 「コピー」をクリックするとborder-radiusのCSSコードを取得できます。個別プロパティやTailwindクラスが必要な場合は、別形式のセクションを使います。
活用例
- ボタンのスタイル: ピル型のボタン、控えめな丸みのCTAボタン、完全な円形のアイコンボタンを作成できます。
- カードコンポーネント: デザインシステム内のカード、モーダル、ダイアログに、統一感のある角丸を適用できます。
- アバター画像: 正方形の画像にborder-radiusを50%に設定すると、完全な円形のユーザーアバターやプロフィール画像になります。
- 入力欄: フォームの入力欄、テキストエリア、セレクトのドロップダウンに控えめな丸みを加えて、モダンな印象にします。
- ナビゲーション要素: タブ、バッジ、タグ、ナビゲーション項目に、適切な角丸のスタイルを設定します。
- 創造的な形: 非対称な角の値を組み合わせて、有機的なブロブ、しずく型、独自の装飾要素を作成できます。
- ツールチップとポップオーバーのデザイン: ツールチップ、ポップオーバー、ドロップダウンメニューに、正確な角丸を適用できます。
- レスポンシブなデザイントークン: emまたはremの単位を使って、プロジェクト全体で統一したborder-radiusの値を定めます。
よくある質問
このツールは無料ですか？
はい、角丸生成は完全無料で、制限はありません。登録や支払いなしで、何度でも利用できます。
データは安全ですか?
はい、安全です。このツールはすべてブラウザ内で動作します。データがサーバーに送信されることはないため、設定や生成されたCSSコードはお使いの端末内だけに留まります。
border-radiusでpxと%の違いは何ですか?
ピクセル(px)の値は、要素のサイズに関係なく固定の半径になります。パーセント(%)の値は要素の寸法に対する相対値なので、レスポンシブに対応できます。たとえば、正方形の要素に50%を指定すると、完全な円になります。
CSSで完全な円を作るにはどうすればよいですか?
幅と高さが等しい要素に、border-radiusを50%に設定します。このツールの「円」プリセットは、まさにこの設定を適用します。
border-radiusはすべてのブラウザで対応していますか?
はい、border-radiusのCSSプロパティは、Chrome、Firefox、Safari、Edge、Operaを含むすべての最新ブラウザで完全に対応しています。ベンダープレフィックスは不要です。
ヒントとベストプラクティス
- 値を統一する: 見た目の一貫性のために、デザインシステムでは2-3種類の標準的なborder-radiusの値(例: 4px、8px、16px)を定めましょう。
- 円には%を使う: 正方形の要素に50%を指定すると完全な円になり、サイズが変わっても自動的に拡大縮小します。
- フォームは控えめに: 入力欄やフォーム要素には、小さな値(2-8px)がすっきりとした洗練された印象を保てて最適です。
- 非対称な角を試す: 角ごとに異なる値を指定すると独特な形になり、装飾要素に個性を加えられます。
- レスポンシブな単位を検討する: emまたはremを使うと、border-radiusの値が文字サイズに比例して拡大縮小します。
- 内容を入れて確認する: 要素の中に実際のコンテンツを入れた状態で、特にさまざまなビューポートサイズで、角丸の見え方を必ず確認してください。