CSSで罫線を角丸で表示する(1):FirefoxとSafariのCSS

エ・ビスコム・テック・ラボ
2008/01/11 07:00

今回はSafariとFirefoxが対応している、罫線の角を丸く表示するスタイルシートを検証する。

Firefoxの対応

 Firefoxでも、Safari 3と同じように罫線の角を丸く表示することができる。Firefoxではバージョン3以前から対応しており、-moz-border-radiusプロパティを利用する。次のように-webkit-border-radiusと-moz-border-radiusの両方を指定すれば、Safari 3とFirefoxで同じように罫線を角丸で表示することが可能だ。

Safari 3の表示 Safari 3の表示
Firefox 3の表示 Firefox 3の表示
div	{
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border: solid 5px blue;
	background-color: skyblue;
	padding: 20px;
	width: 100px;
	}

※ブラウザで表示を確認する

CSS 3における角丸のプロパティ

 罫線の角を丸くするプロパティは、CSS 3では「border-radius」として提案されている。Safari 3の「-webkit-border-radius」や、Firefoxの「-moz-border-radius」はこの規格を先取りしたもので、実験的な対応ということから「-webkit-」や「-moz-」を付けて利用するかたちになっている。

 将来的にCSS 3に対応してくるブラウザまで考慮してスタイルシートを指定する場合には、次のように3つの指定を記述しておくとよいだろう。

div	{
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	border: solid 5px blue;
	background-color: skyblue;
	padding: 20px;
	width: 100px;
	}

 ここからは、border-radiusプロパティが提案されているCSS 3の草案「CSS3 Backgrounds and borders Module」を参考に、どのような設定や表示が可能なのかを確認していく。

記事の感想やご意見をコメントでお寄せください(CNET_IDログインが必要です)
ログイン パスワードを忘れた方  |  新規登録
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 読者投票
    いよいよ7月11日に売り出される「iPhone 3G」。今のところの購入予定は?

    投票受付期間:2008年7月7日 〜 2008年7月11日
  • » 投票しないで結果だけ見る