【css】角の丸み設定

4角の全てに対応する場合

css

.test{
	border-radius: 10px;        /* CSS3草案 */  
	-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
	-moz-border-radius: 10px;   /* Firefox用 */
}

.test{

border-radius: 10px; /* CSS3草案 */

-webkit-border-radius: 10px; /* Safari,Google Chrome用 */

-moz-border-radius: 10px; /* Firefox用 */

}

それぞれの角に対応する場合1
水平方向と垂直方向の半径の値を、左上・右上・右下・左下の順に設定します。
/の前が水平方向の左上・右上・右下・左下の設定で、/の後が垂直方向の左上・右上・右下・左下の設定です。
css

.test{
	border-radius: 100px 25px 50px 50px / 50px 25px 50px 25px;
}

.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

.test{
	border-top-left-radius:10px;
	border-top-left-radius:10px 20px;
}

.test{

border-top-left-radius:10px;

border-top-left-radius:10px 20px;

}