CSS3 角丸を表現する border-radius

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用 */
}

特定部分だけを指定

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

.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;
}

IE や Opera にも実装させる

IE や Opera にも実装させるなら JavaScript 等を使用しなくてはいけません。

Curved corner (border-radius) cross browser

IE6 IE7 IE8 で実装はされますが、Opera は非対応です。後背景画像を指定した際思い通りに表現してくれませんでした...

border-radius.js

今のところ IE8 には対応してない状態です。