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

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

 前回に引き続き、罫線の角を丸く表示するスタイルシートの機能を見ていきたいと思う。

 罫線の角丸は、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;
}

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

  • 新着記事
  • 特集
  • ブログ