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」の場合、カーブ部分が実線になっていることがわかる。
ここではスタイルシートを次のように指定して、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;
}
- 特集: FirefoxとSafariのCSS徹底検証 (66件)
- ホワイトペーパー
- 企画特集
- 話題のタグ
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
話題のタグを見る »


SQLite対応アプリのデータベースファイルを閲覧する
グーグル、「Google Buzz」を発表--Gmailのソーシャル機能を強化
「H.264」ストリーミングのロイヤリティ無料期間が延長
マイクロソフト、「Office 2010」のRC版をリリース
仮想環境のバックアップは難しいのか
利用者の理想を追求した最新レンタルサーバ
Xbox Live インディーズゲーム開発の軌跡
アンケートから見るセキュリティ対策の実態
レガシーアプリケーションの稼働どうしてる?
仮想化をダメにするストレージの実態
身近な業務をCRMが変革!
新しい視点のレンタルサーバが誕生!
経営統合後の事業損益構造の見える化を実現
事例 VMwareでデータセンターをクラウド化
DBのパフォーマンスに困ってませんか?
通販サイトのアクセス集中からの危機を救う
御社はまだフリーの転送サービスですか?
アプリケーション仮想化 3つの課題