“border-radius”プロパティ:角丸

概要

“border-radius”プロパティは角丸を指定する以下のプロパティの一括指定プロパティです。

• “border-top-left-radius”プロパティ
• “border-top-right-radius”プロパティ
• “border-bottom-right-radius”プロパティ
• “border-bottom-left-radius”プロパティ

サンプルコード

div { border-radius: 20px / 20px;}


値

値の指定方法

角丸の半径は“px”、“em”などで指定した長さ、もしくはボーダー・ボックスの幅、高さに対するパーセンテージで指定します。指定した値はボーダーの外縁の半径になります。

値が1つの場合は4つすべての角の半径となります。

div { border-radius: 〚角丸の半径〛;}


スラッシュ(“/”)により区切られた2つの値は“/”の前が水平方向の半径、“/”の後は垂直方向の半径になります。“/”がなく、値が一つの場合はその値が水平方向と垂直方向の両方の半径になります。

border-radius: 〚水平方向の半径〛 / 〚垂直方向の半径〛;


また、複数の値をホワイトスペースで区切って記述することができます。値の個数によってそれぞれの値が対応する角が変わります。

• 2つの場合は1つ目の値が左上と右下、2つ目の値が右上と左下の角に適用されます。
• 3つの場合は1つ目の値が左上と右下、2つ目の値が右上と左下、3つ目の値が右下の角に適用されます。
• 4つの場合は1つ目の値が左上、2つ目の値が右上、3つ目の値が右下、4つ目の値が左下の角に適用されます。

border-radius: 〚すべての角〛;
border-radius: 〚左上と右下〛 〚右上と左下〛;
border-radius: 〚左上〛 〚右上と左下〛 〚右下〛;
border-radius: 〚左上〛 〚右上〛 〚右下〛 〚左下〛;


スラッシュ(“/”)で区切って2セットの値を記述すると1セット目が水平方向の半径、2セット目が垂直方向の半径を指定します。数値を記述する順番は1セットのみ記述するときと同じです。

border-radius: 〚左上と右下の水平方向の半径〛 〚右上と左下の水平方向の半径〛 / 〚左上と右下の垂直方向の半径〛 〚右上と左下の垂直方向の半径〛;


半径が“0”の場合は丸くない角になります。

仕様書

定義されている仕様書

border-radius

<length>
<percentage>

角丸を指定する

“<length>”値で指定する

div { border-radius: 20px / 20px;}


border-radius: 20px / 20px;

div { border-radius: 20px 20px 20px 20px;}


border-radius: 20px 20px 20px 20px;

div { border-radius: 20px;}


border-radius: 20px;

“<percentage>”値で指定する

div { border-radius: 10% / 10%;}


border-radius: 10% / 10%;

div { border-radius: 10%;}


border-radius: 10%;

水平方向と垂直方向の半径をそれぞれ指定する

div { border-radius: 20px / 40px;}


border-radius: 20px / 40px;

それぞれの角の半径を指定する

div { border-radius: 10px 20px 30px 40px;}


border-radius: 10px 20px 30px 40px;

div { border-radius: 10px 40px;}


border-radius: 10px 40px;

div { border-radius: 0px 10px 40px;}


border-radius: 0px 10px 40px;