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にログインしてコメントする

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