Border Radius ジェネレーター

border-radiusとは？

border-radiusはCSS プロパティで、要素ボックスの角を丸くします。単一の値ですべての角を均等に丸めます。4つの値で各角を独立して丸めます。これは現代的なウェブデザインで最もよく使われるプロパティの1つです。ピル形状のボタン、丸められたカード、円形のアバター、およびソフトコーナーのモーダルはすべて、この1つの宣言に依存しています。

角の順序

4つの値を指定するとき、CSSはそれらを常に同じ順序で適用します。左上の角から始まり、時計回りに移動します：

1. 左上
2. 右上
3. 右下
4. 左下

したがって、border-radius: 10px 20px 30px 40px;は左上の角を10px、右上を20px、右下を30px、左下を40pxで丸めます。このツールはまったく同じ順序に従い、その4つの角スライダーはこれに合わせてラベル付けされています。

このツールの使い方

1. すべての角に同じ値を使用を有効にしたままにして、左上スライダーをドラッグしてボックス全体に1つの半径を設定します。これが一般的なケースです（ボタン、カード、アバター）。
2. すべての角に同じ値を使用をオフにして、4つの角それぞれの独立したスライダーを表示し、非対称な形（吹き出し、涙滴、傾いたカード）のためにそれらを個別に設定します。
3. 単位を選択します。pxは固定ピクセル半径、%は要素自身のサイズに対する相対半径（正方形ボックスの完全な円/楕円に便利）、またはem/remはフォントサイズでスケーリングします。
4. CSSボックスから生成されたCSSをコピーするか、.cssファイルとしてダウンロードし、スタイルシートに貼り付けます。

あらゆるコントロールを調整するにつれて、出力は即座に更新されます。別の「生成」ステップはありません。

出力が予想より短いことがある理由

4つの角すべてが等しい値で終わる場合、ツールは同じ値を4回繰り返す代わりに（border-radius: 20px 20px 20px 20px;）、コンパクトな単一値の形式(border-radius: 20px;)を出力します。両方とも有効なCSSで同じようにレンダリングされます。単一値の形式はより読みやすく、保守しやすいだけです。いずれかの角が異なると、4つの値すべてが明示的に書き出されます。上記で説明した左上→右上→右下→左下の順序で。

よくある質問

完全な円に対してパーセンテージを使用できますか？ はい。単位を%に設定し、正方形要素（幅と高さが同じ）の（均一な）半径を50%に設定します。これにより、4つの角すべてが完全な円に丸められます。

px、%、em、remの違いは何ですか？ pxはコンテキストに関係なく固定サイズです。%は要素自身の幅/高さに対する相対値なので、ボックスのサイズが変わると自動的にスケーリングされます。emは要素自身のフォントサイズに対する相対値です。remはルート（html）のフォントサイズに対する相対値なので、ページの基本テキストサイズとスケーリングが一貫しており、どこで使用されても同じです。

このツールは楕円の角（水平/垂直の半径が異なる）に対応していますか？ 現在のところは対応していません。このツールは一般的な均一および4角のケースをカバーしています。楕円の角については、スタイルシートで直接CSS border-radius: <水平値> / <垂直値>shorthandを使用してください。

すべてのブラウザで機能しますか？ はい。border-radiusは1年以上にわたって、すべての主要ブラウザでプリフィックスなしでサポートされています。

プライバシー

すべてはあなたのブラウザで実行されます。入力するCSS、値、設定は決してサーバーに送信されません。宣言はあなたが入力するにつれて、ローカルで生成および更新されます。