Border Radius Generator
Generate border radius
Generate border radius ブラウザ内でローカルに実行
border-radius: 12px;
About the
Border Radius Generator は、ライブ プレビューを使用してボックスの 4 つの角を個別に設定し、CSS を提供します。速記の順序は、誰もが忘れているものです。左上、右上、右下、左下、左上から時計回りに進みます。 1 つの値は 4 つの角すべてに適用され、2 つの値は対角線のペアに適用され、4 つの値は各角を順番に指定します。 4 つすべてが一致すると、ツールは単一値フォームを出力します。これは、ほとんどの場合、実際に必要なものです。
Where people use the
- ピクセル値を推測せずに半径を設計仕様に一致させます。
- カードまたはモーダルの上角のみを丸くします。
- ピル ボタンの形状を要素の高さの半分の半径にします。
- 正方形のアバターを円に変える半径を見つけます。
How to use the
- 1
隅のスライダーをドラッグします
各コーナーには 0 ～ 150 ピクセルの独自のスライダーがあります。プレビュー ボックスは、移動すると丸くなります。
- 2
コーナーをリンクしたままにするか、リンクを解除します
リンクがオンの場合、スライダーを動かすと 4 つすべてが一緒に動きます。これをオフにすると、個々の角の形状が決まります。これが、吹き出しの尾や葉の形状を作成する方法です。
- 3
CSSを読む
4 つすべてが一致する場合は、単一値の省略表現が得られます。それらが異なる場合は、時計回りの順序で完全な 4 つの値の形式が得られます。
- 4
代わりにパーセンテージを考慮してください
正方形要素の半径 50% は円になります。必要に応じて、スタイルシート内のピクセル単位をパーセンテージに置き換えてください。
ヒントとベストプラクティス
- 要素のサイズが変更される場合はパーセンテージを使用し、変更されない場合はピクセルを使用します。
- ピル ボタンの半径は固定されていません。高さの半分であるため、9999px は怠惰ではあるが確実な答えです。
- コンポーネント セット全体で半径の一貫性を保ちます。 4px、6px、8px を混ぜると偶然のように見えます。
よくある質問
4 つの値はどのような順序で並んでいますか?
左上から時計回りに、左上、右上、右下、左下。便利な記憶術は、読み始めたところから始まり、時計の文字盤のように循環するというものです。
2 つまたは 3 つの値は何を意味しますか?
2 つの値は対角線を設定します。1 つ目は左上と右下、2 つ目は右上と左下です。 3 つの値は、左上、次に右上と左下を一緒に設定し、次に右下に設定します。
サークルを作るにはどうすればよいですか?
すでに正方形の要素には 50% を使用します。ピクセルを使用すると、半径がたまたま幅の半分に等しい場合にのみ円が得られ、要素のサイズが変更された瞬間に円が壊れます。
水平方向と垂直方向に異なる角の丸みを付けることはできますか?
完全な構文では、楕円半径を水平値、スラッシュ、その後垂直値として記述することができます。このツールはより単純な均一なフォームを出力するため、その形状が必要な場合は手動でスラッシュ バージョンを追加します。
丸い角が欠けているのはなぜですか?
子コンテンツが丸いボックスにクリップされていないためです。要素にオーバーフロー非表示を追加しないと、要素内の画像または背景には四角い角が表示されたままになります。