CSS で border に角丸を付ける

CSS3 から導入された「border-radius」を使うと、画像や JavaScript を使用せずに、CSS だけで角丸が実装できます。

今現在「border-radius」に対応しているブラウザは、Firefox, Safari, Google Chrome のみです。

一気に角丸の大きさを変更する場合

.ExampleClass {
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}

角ごとに角丸の大きさを変更する場合

.ExampleClass {
	-moz-border-radius-topright: 4px;
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-bottomright: 4px;
	-moz-border-radius-bottomleft: 4px;
	-webkit-border-top-right-radius: 4px;
	-webkit-border-top-left-radius: 4px;
	-webkit-border-bottom-right-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
}

各ブラウザのごとに、どこまで統一したデザインのサイト制作するか。採用する前に、考えなくてはいけませんね。