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

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

角ごとに半径を変える場合

 4つの角ごとに半径を変えて表示することも可能だ。その場合、CSS 3では次のプロパティを利用して半径を指定する仕組みになっている。

  • border-top-left-radius(左上の半径を指定)
  • border-top-right-radius(右上の半径を指定)
  • border-bottom-right-radius(右下の半径を指定)
  • border-bottom-left-radius(左下の半径を指定)

 Safari 3では、CSS 3のプロパティに「-webkit-」を付けたプロパティをサポートしている。

  • -webkit-border-top-left-radius(左上の半径を指定)
  • -webkit-border-top-right-radius(右上の半径を指定)
  • -webkit-border-bottom-right-radius(右下の半径を指定)
  • -webkit-border-bottom-left-radius(左上の半径を指定)

 一方、Firefoxでは次のようにプロパティを記述する。CSS 3のプロパティに「-moz-」を付けたものではないので注意したい。

  • -moz-border-radius-topleft(左上の半径を指定)
  • -moz-border-radius-topright(右上の半径を指定)
  • -moz-border-radius-bottomright(右下の半径を指定)
  • -moz-border-radius-bottomleft(左下の半径を指定)

 たとえば、4つの角をそれぞれ、左上を10ピクセル、右上を20ピクセル、右下を30ピクセル、左下を30ピクセルと指定すると、次のような表示になる。

Safari 3の表示 Safari 3の表示
Firefox 3の表示 Firefox 3の表示
div{
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 40px;

-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 40px;

border: solid 5px red;
background-color: orange;
padding: 20px;
width: 100px;
}

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

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