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 には対応してない状態です。

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article