【CSS】角丸（古い書き方のメモ）

Tweet

Category css 2011/11/21

これは古い書き方なので、こんな時代もあったんだな程度のメモです。

参考にしないでください。

普通の角丸ボックスをするCSS

例）

div {
	border-radius: 5px; /* CSS3 */
	-webkit-border-radius: 5px; /* Webkit (Safari, Chrome ...) */
	-moz-border-radius: 5px; /* Firefox */
}

デモ）

div {
	width:300px;
	padding:20px;
	background:#336699;
	color:#ffffff;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

角丸ボックスの各コーナーの丸みを制御する

例）

div {
	/* CSS3 */
	border-radius: 左上（水平方向） 右上（水平方向） 右下（水平方向） 左下（水平方向）/ 左上（垂直方向） 右上（垂直方向） 右下（垂直方向） 左下（垂直方向）;
	/* Webkit (Safari, Chrome ...) */
	-webkit-border-top-left-radius: 左上;
	-webkit-border-top-right-radius: 右上;
	-webkit-border-bottom-right-radius: 右下;
	-webkit-border-bottom-left-radius: 左下;
	/* Firefox */
	-moz-border-radius-topleft: 左上;
	-moz-border-radius-topright: 右上;
	-moz-border-radius-bottomright: 右下;
	-moz-border-radius-bottomleft: 左下;
}

デモ）

div {
	background:#ffcc33;
	color:#cc0000;
	/* CSS3 */
	border-radius: 10px 20px 30px 100px / 10px 20px 30px 100px;
	/* Webkit (Safari, Chrome ...) */
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 20px;
	-webkit-border-bottom-right-radius: 30px;
	-webkit-border-bottom-left-radius: 100px;
	/* Firefox */
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 20px;
	-moz-border-radius-bottomright: 30px;
	-moz-border-radius-bottomleft: 100px;
}

参考

-moz-border-radius（廃止）

border-radius（こっちを使おう！）

注意

これは古い書き方なので、参考にしないでください。