CSSでテキスト入力ボックスやボタンを角丸にするのはよくやりますが、四隅全部ではなく部分的に角丸をする方法です。

たとえば下の画像では、テキストボックスは左側だけを、ボタンは右側だけを角丸にしています。

input[type="text"] {
	border-top-left-radius : 8px;
	-webkit-border-top-left-radius: 8px;
	-moz-border-radius-topleft: 8px;
	border-bottom-left-radius : 8px;
	-webkit-border-bottom-left-radius: 8px;
	-moz-border-radius-bottomleft: 8px;
}

上のCSSコードはテキストボックスの左側だけを角丸にするコードですが、こうすれば上手くいくのかと思ったら

iOSのsafariでは、下の画像のように、なぜか四隅全部に角丸が適用されてしまいました。

したがいまして、safari対策として

input[type="text"] {
	border-top-left-radius : 8px;
	-webkit-border-top-left-radius: 8px;
	-moz-border-radius-topleft: 8px;
	border-bottom-left-radius : 8px;
	-webkit-border-bottom-left-radius: 8px;
	-moz-border-radius-bottomleft: 8px;
	border-top-right-radius : 0px;
	-webkit-border-top-right-radius: 0px;
	-moz-border-radius-topright: 0px;
	border-bottom-right-radius : 0px;
	-webkit-border-bottom-right-radius: 0px;
	-moz-border-radius-bottomright: 0px;
}

このように角丸にしない角には値に0pxを指定をすれば出来ました。