CSSで罫線を角丸で表示する（2）：FirefoxとSafariのCSS

エ・ビスコム・テック・ラボ
2008/01/18 13:15

Firefox 3とSafari 3のCSS対応を検証する本連載。今回も罫線の角を丸く表示する機能をみていきたい。

　前回に引き続き、罫線の角を丸く表示するスタイルシートの機能を見ていきたいと思う。

　罫線の角丸は、CSS 3の草案「CSS3 Backgrounds and borders Module」で提案されたborder-radiusプロパティで設定することができる。現在のところ、Safari 3では-webkit-border-radius、Firefoxでは-moz-border-radiusプロパティで指定するようになっている。

罫線の種類を変えた場合

　CSS 3では、どのような種類の罫線で表示した場合でも、罫線はカーブに沿って表示するとされている。そこで、罫線の種類を変えて角丸を表示してみると、Safari 3とFirefox 3では次のような表示になる。Safari 3ではすべての罫線がカーブに沿って表示されているが、Firefox 3では罫線の種類が「dotted」と「dashed」の場合、カーブ部分が実線になっていることがわかる。

Safari 3の表示 Safari 3の表示
Firefox 3の表示 Firefox 3の表示

　ここではスタイルシートを次のように指定して、border-styleプロパティで罫線の種類を変えて表示している。罫線の種類の違いをわかりやすくするため、角丸の半径は40ピクセル、罫線の太さは10ピクセルに指定した。

div	{
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	border-style: 〜;
	border-width: 10px;
	border-color: red;
	background-color: orange;
	width: 100px;
	}

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

記事に関係する情報をコメントでお寄せください

ニックネーム : CNET_IDにログインしてコメントする

コメント本文（必須） :
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 話題のタグ
セキュリティ iPod touch Internet Explorer Ajax Mac OS X Windows Vista PHP Linux JavaScript モバイル Safari データベース Tips iPhone Off Topic オープンソース Chrome Windows XP Flash UI 小技 Java Windows Apple アプリケーション 開発環境 Firefox Mozilla RIA ブラウザ CSS マイクロソフト 仮想化 Google インストール Firefox 3 Webサービス HTML ソフトウェア開発 プログラミング言語 脆弱性 iPhone 3G リファレンス OS Opera Microsoft Windows 7 WebKit Webデザイン Database
  • 話題のタグを見る »