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

最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

罫線を表示しない場合

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

Safari 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の表示

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の表示

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プロパティの機能を見ていきたい。