border-radiusプロパティは、指定された要素の 4 つのコーナーの角を丸くすることができます。 プロパティの値にはコーナーの角丸の半径となる値を指定します。
値をひとつだけ指定するとすべてのコーナーの角丸を同じ半径の値の 4 分の 1 正円で表します。
下記の例は、指定した要素に対して角丸の半径を 20 ピクセルと指定しています。
.border-radius-sample1 {
background-color: #efefef;
padding: 20px;
border: solid 5px #999;
border-radius: 20px;
-moz-border-radius: 20px; /* Firefox用 */
-webkit-border-radius: 20px; /* Safari,Google Chrome用 */
-o-border-radius: 20px; /* Opera用 */
}
値に半径の長さがひとつだけ指定された場合の表示サンプルです。
値をひとつだけ指定するとすべてのコーナーの角丸を同じ半径の値の 4 分の 1 正円で表します。
各コーナーの半径の値を別々に指定することもできます。値は、左上・右上・右下・左下の順で指定します。
下記の例は、指定した要素に対して 4 つのコーナーの角丸の半径を別々の値で指定しています。
.border-radius-sample2 {
background-color: #efefef;
padding: 20px;
border: solid 5px #999;
border-radius: 10px 20px 30px 40px;
-moz-border-radius: 10px 20px 30px 40px; /* Firefox用 */
-webkit-border-radius: 10px 20px 30px 40px; /* Safari,Google Chrome用 */
-o-border-radius: 10px 20px 30px 40px; /* Opera用 */
}
値に 4 つのコーナーの半径の値を別々に指定された場合の表示サンプルです。
各コーナーの半径の値を別々に指定することもできます。値は、左上・右上・右下・左下の順で指定します。
角丸の形状は、水平方向と垂直方向の 2 つの半径を持つ楕円形状で表され、それぞれの水平方向と垂直方向の半径の値を別々に指定することができます。
水平方向と垂直方向の半径のセットは、スラッシュ（ / ）で区切って指定します。
.border-radius-example {
border-radius: 水平左上 水平右上 水平右下 水平左下 / 垂直左上 垂直右上 垂直右下 垂直左下;
}
下記の例は、指定した要素に対して 4 つのコーナーの角丸の楕円の水平方向と垂直方向半径を別々の値で指定しています。
.border-radius-sample3 {
background-color: #efefef;
padding: 20px;
border: solid 5px #999;
border-radius: 20px 30px 40px 50px / 30px 40px 50px 60px;
-moz-border-radius: 20px 30px 40px 50px / 30px 40px 50px 60px; /* Firefox用 */
-webkit-border-radius: 20px 30px 40px 50px / 30px 40px 50px 60px; /* Safari,Google Chrome用 */
-o-border-radius: 20px 30px 40px 50px / 30px 40px 50px 60px; /* Opera用 */
}
値に4 つのコーナーの角丸の楕円の水平方向と垂直方向半径を別々の値で指定された場合の表示サンプルです。
指定した要素に対して 4 つのコーナーの角丸の楕円の水平方向と垂直方向半径を別々の値で指定しています。
罫線を表示せずに border-radius を指定した場合、背景を角丸で表示することができます。
.border-radius-sample4 {
background-color: #999;
padding: 20px;
color: #fff;
border: none;
border-radius: 20px;
-moz-border-radius: 20px; /* Firefox用 */
-webkit-border-radius: 20px; /* Safari,Google Chrome用 */
-o-border-radius: 20px; /* Opera用 */
}
border: none を指定して、罫線を非表示にした場合の表示サンプルです。
border: none を指定して、罫線を表示せずに border-radius を指定した場合、背景を角丸で表示することができます。
Post your comment