4角の全てに対応する場合
css
|
1 2 3 4 5 |
.test{ border-radius: 10px; /* CSS3草案 */ -webkit-border-radius: 10px; /* Safari,Google Chrome用 */ -moz-border-radius: 10px; /* Firefox用 */ } |
それぞれの角に対応する場合1
水平方向と垂直方向の半径の値を、左上・右上・右下・左下の順に設定します。
/の前が水平方向の左上・右上・右下・左下の設定で、/の後が垂直方向の左上・右上・右下・左下の設定です。
css
|
1 2 3 |
.test{ border-radius: 100px 25px 50px 50px / 50px 25px 50px 25px; } |
それぞれの角に対応する場合2
border-top-left-radius（左上）
border-top-right-radius（右上）
border-bottom-left-radius（左下）
border-bottom-right-radius
で個別設定も可能です。
値を1つしか設定していない場合は、水平、垂直方向療法に反映されます。
値を2つ設定した場合は1つ目が水平、2つ目が垂直方向になります。
例
css
|
1 2 3 4 |
.test{ border-top-left-radius:10px; border-top-left-radius:10px 20px; } |