border-radiusプロパティ

値

パターン1

4つの角に対し、一括指定している例です。

CSSコード例

border-radius: 8px;

表示例：

パターン2

値を2つ指定した場合、1つ目の「10px」はtop-left（左上）、bottom-right（右上）に適用され、2つ目の「0」はtop-right（右上）、bottom-left（左下）に適用されます。

CSSコード例

border-radius: 10px 0;

表示例：

パターン3

値を3つ指定した場合、1つ目の「10px」はtop-left（左上）に、2つ目の「15px」はtop-right（右上）とbottom-left（左下）に、3つ目の「3px」はbottom-right（右下）に適用されます。

CSSコード例

border-radius: 10px 15px 3px;

表示例：

パターン4

値を4つ指定した場合、top-left（左上）、top-right（右上）、bottom-right（右下）、bottom-left（左下）の順に適用されます。

CSSコード例

border-radius: 20px 5px 10px 0px;

表示例：

パターン5

角丸に対し、水平方向と垂直方向の長さを指定することができます。次のCSSは、4つの角に対して水平方向の指定を行い、「/（半角スラッシュ）」を入れてから垂直方向の指定を行っています。

水平方向、垂直方向ともに指定する角の順はパターン4と同じく1つ目がtop-left（左上）、2つ目はtop-right（右上）、3つ目はbottom-right（右下）、4つ目はbottom-left（左下）となります。

CSSコード例

border-radius: 20px 20px 15px 15px/10px 10px 30px 30px;

表示例：

パターン6

border-radiusプロパティで一括指定することも可能ですが、次のように角ごとに指定することも可能です。パターン1〜4のように水平方向・垂直方向を1つの値で共通指定することも、パターン5のように2つの値で個別に指定することも可能です。なお、角ごとに指定する場合は水平方向・垂直方向を区切る「/（半角スラッシュ）」は不要です。

CSSコード例

border-top-left-radius: 10px 15px;
border-top-right-radius: 40px;
border-bottom-left-radius: 10px 15px;
border-bottom-right-radius: 20px;

表示例：

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。