CSSのborder-radius宣言を4隅の値から生成する方法

4隅の値と単位を指定すると、CSSの border-radius 宣言を生成できます。値を省略した場合は10、単位を省略した場合はpxが使われます。

CSSの角丸指定を作る場面

このツールは、CSSで要素の角を丸めるための border-radius 宣言を作成するときに使います。左上、右上、右下、左下の4隅を個別に指定できるため、4隅が同じ形のデザインだけでなく、左右や上下で異なる角のデザインにも対応できます。単位を選び、各欄に値を入れるだけで、貼り付けて確認しやすい宣言の形にまとめられます。

使い方の手順

1. 4つの入力欄に、角の半径を指定します。入力欄の順番は、左上、右上、右下、左下です。たとえば、上側を大きく、下側を小さくしたい場合は、それぞれの角に対応する欄へ別々の値を入れます。

2. 使用する単位を選択します。単位を省略した場合は px が使われます。値を省略した角には 10 が適用されるため、4隅をすべて自分で指定しない場合も、既定値を使った宣言が作られます。

3. 入力内容を確認して生成を実行します。生成されたCSS宣言を確認し、対象要素のスタイルへ貼り付けます。出力は角丸のための border-radius 宣言であり、セレクターや他のスタイル規則まで含むものではありません。

生成結果の読み方

結果では、4つの値が左上、右上、右下、左下の順で並んでいるかを確認します。指定した単位は各値に付加されます。たとえば4隅に異なる数値を入れた場合は、出力でもその順序と単位の対応を読み取れます。すべての角を同じ値にすれば均一な角丸になり、角ごとに値を変えれば非対称な形になります。値に 0 を指定した角は、角丸を付けない指定として出力を確認できます。

入力を省略した場合の 10 や px は、意図したデザインと異なる可能性があります。生成後は、特に省略した欄と単位の付加位置を確認してから利用してください。

使用例

カードの4隅を同じ丸みにせず、左下だけ角丸なしにしたい場合に、4つの値を個別に入力してCSS宣言を作成します。

左上を大きめ、右上と右下を中程度、左下を0に設定し、単位を選択して生成結果を確認します。

4つの入力値が左上、右上、右下、左下の順に並び、選択した単位が各値に付加された border-radius 宣言になります。

制限事項

• 生成されるのは角丸用の border-radius 宣言です。セレクターや他のCSSプロパティを含む完全なスタイルシートではありません。

よくある間違い

• 角の順番を、上左・上右・下右・下左以外の順だと思って入力すると、意図と異なる形になります。左上、右上、右下、左下の順に対応する欄を確認してから値を入れてください。

よくある質問

角の値を省略するとどうなりますか？

値を省略した場合は、その角に 10 が適用されます。4隅すべてを個別に入力しない場合でも、生成結果には既定値を使った宣言が含まれます。

単位を入力しない場合はどうなりますか？

単位を省略した場合は px が使われます。別の単位を指定した場合は、その単位の文字列が各値に付加されます。

4つの角に異なる値を設定できますか？

4隅を別々に指定できます。入力順は左上、右上、右下、左下で、生成された宣言にもその順番で値が配置されます。