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

エ・ビスコム・テック・ラボ
2008-01-11 07:00:00
  • このエントリーをはてなブックマークに追加

罫線を表示しない場合

 CSS 3では、罫線を表示せずにborder-radiusを指定した場合、背景を角丸で表示することになっている。Safari 3とFirefox 3でもCSS 3の記述に従い、次のように表示を行う。ここでは、水色で表示した背景の角が丸くなっていることがわかる。

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

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

 背景画像を使用している場合でも、Safari 3では同じように角を丸くカットして表示を行う。しかし、Firefox 3では背景画像はそのまま四角く表示されてしまう。

Safari 3の表示 Safari 3の表示
Firefox 3の表示 Firefox 3の表示
div{
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border: none;
background-image: url(bk.png);
padding: 20px;
width: 100px;
}

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

 罫線を表示しても、Firefox 3では背景画像の角はカットされないので注意が必要だ。

Safari 3の表示 Safari 3の表示
Firefox 3の表示 Firefox 3の表示
div{
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border: solid 5px blue;
background-image: url(bk.png);
padding: 20px;
width: 100px;
}

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

 次回も引き続き、-webkit-border-radiusと-moz-border-radiusプロパティの機能を見ていきたい。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]