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

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