CSS3 角丸を表現する border-radius

Category
： CSS3

CSS3 角丸を表現する「border-radius」

今まで画像で角丸を表現していた部分を border-radius を使用する事で簡単に角丸を表現出来ちゃうプロパティです。

正確にはCSS3の草案「CSS3 Backgrounds and borders Module」中なんですが、これが普通に使えればどれだけ楽になるか...って感じなので、使い方を紹介しておきたいと思います。

border-radius 基礎

現在のところ Safari、Google Chrome では -webkit-border-radius、Firefox では -moz-border-radius と指定するようになってます。
IE や Opera にも実装させるなら JavaScript 等を使用しなくてはいけません。

border-radius 指定方法

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

表示例 : サンプルページ 1

特定部分だけを指定

左上の指定や右上の指定など各要素のみを指定する際は下記の用に二つの指定方法があります。

.demo	{
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 20px;
	-webkit-border-bottom-right-radius: 30px;
	-webkit-border-bottom-left-radius: 40px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 20px;
	-moz-border-radius-bottomright: 30px;
	-moz-border-radius-bottomleft: 40px;
}

表示例 : サンプルページ 2　※-webkit- と -moz- では指定方法が少し違うので注意して下さい。

border 要素を変えてみる

.demo1	{
	border: 5px dotted #999;
}
.demo2	{
	border: 5px dashed #999;
}
.demo3	{
	border: 5px solid #999;
}
.demo4	{
	border: 5px double #999;
}
.demo5	{
	border: 5px groove #999;
}
.demo6	{
	border: 5px ridge #999;
}
.demo7	{
	border: 5px inset #999;
}
.demo8	{
	border: 5px outset #999;
}