HTML & CSS

最終更新日:
公開日:

リファレンス

CSS

ボーダー ラディウス

border-radiusプロパティ

4辺にあるボーダーの接点となる4隅に、角丸を設定するためのプロパティです。要素を角丸として見せたい場合に使用します。

  • 初期値

    0

  • 継承

    不可

  • 適用できる要素

    全要素

パターン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;

表示例:

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

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

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