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

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

Firefoxの対応

 Firefoxでも、Safari 3と同じように罫線の角を丸く表示することができる。Firefoxではバージョン3以前から対応しており、-moz-border-radiusプロパティを利用する。次のように-webkit-border-radiusと-moz-border-radiusの両方を指定すれば、Safari 3とFirefoxで同じように罫線を角丸で表示することが可能だ。

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

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

CSS 3における角丸のプロパティ

 罫線の角を丸くするプロパティは、CSS 3では「border-radius」として提案されている。Safari 3の「-webkit-border-radius」や、Firefoxの「-moz-border-radius」はこの規格を先取りしたもので、実験的な対応ということから「-webkit-」や「-moz-」を付けて利用するかたちになっている。

 将来的にCSS 3に対応してくるブラウザまで考慮してスタイルシートを指定する場合には、次のように3つの指定を記述しておくとよいだろう。

div{
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border: solid 5px blue;
background-color: skyblue;
padding: 20px;
width: 100px;
}

 ここからは、border-radiusプロパティが提案されているCSS 3の草案「CSS3 Backgrounds and borders Module」を参考に、どのような設定や表示が可能なのかを確認していく。

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