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

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

角ごとの半径をまとめて指定する場合

 現在のCSS 3の草案では、角ごとの半径を1つのプロパティでまとめて指定する方法は提案されていない。1つのプロパティに複数の値を指定すると、楕円の指定と区別できなくなるためだ。楕円の角丸の指定方法については、前回の記事を参照してほしい。

 しかし、Firefoxでは楕円の指定に対応していない代わりに、-moz-border-radiusプロパティで角ごとの半径をまとめて指定することができる。指定方法は、marginやpaddingプロパティで上下左右の余白をまとめて指定する場合と同じで、左上の角の半径から順に時計回りで値を指定していく。Safari 3はこの記述方法には対応していない。

Safari 3の表示 Safari 3の表示
Firefox 3の表示 Firefox 3の表示
div{
-moz-border-radius: 10px 20px 30px 40px;
border: solid 5px red;
background-color: orange;
padding: 20px;
width: 100px;
}

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

 なお、CSS3 Backgrounds and borders Moduleの最新のEditor's Draft(2007年12月25日リリース)では、CSS 3においても次のような形で角ごとの半径をまとめて指定する方法が提案されている。

border-radius: 水平方向の半径 / 垂直方向の半径

 この記述形式であれば、角を楕円で表示することも、角ごとの半径をまとめて指定することもできるようになる。たとえば、次の2つのソースでは、同じ楕円形の角丸を指定したことになる。

border-radius: 10px 20px 30px 40px / 5px
border-top-left-radius: 10px 5px;
border-top-right-radius: 20px 5px;
border-bottom-right-radius: 30px 5px;
border-bottom-left-radius: 40px 5px

 角を楕円にする必要がなければ次のように4つの角の半径を指定することができるので、Safari 3の-webkit-border-radiusよりも、Firefox 3の-moz-border-radiusの動作がより近いことになる。

border-radius: 10px 20px 30px 40px

 なお、この記述形式はEditor's Draftで提案されているものなので、正式な草案(Working Draft)で本採用になるかどうか、今後の動向に注目したい。

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