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

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

楕円形の角丸

 CSS 3のborder-radiusでは、水平方向と垂直方向の半径を別々に指定することで、罫線の角を楕円形で表示できることになっている。楕円形で表示する場合、次のように半角スペースで区切って2つの値を記述して、1つ目の値で水平方向の半径、2つ目の値で垂直方向の半径を指定する。

border-radius: 40px 20px

 Safari 3はこの記述に対応しており、罫線の角を楕円形で表示することができる。次のように指定した場合、水平方向の半径は40ピクセル、垂直方向の半径は20ピクセルで表示される。一方、Firefox 3は楕円形の表示には対応しておらず、1つ目の値は左上と右下の角の半径、2つ目の値は右上と左下の角の半径として処理される。

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

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

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