css,javascript,actionscriptを中心に勉強したことをまとめるブログ

border-radiusについて勉強。

border-radiusとは

指定したブロックの角を丸くすることができます。
モダンブラウザでも一部しか正確にレンダリングされません。

記述方法

border-radius: 値;

px単位で値を指定するとその値の半径分だけ角丸になります。

border-radius: 10px;

4つの角それぞれに指定をしたい場合。

border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;

というように記述します。
また、Google Chromeではimgに指定することで画像自体を角丸にすることもできます。

img {
    border-radius: 10px;
}

すごい！

対応しているブラウザ

http://journal.mycom.co.jp/articles/2009/07/07/Modernizr/002.html

上記のページで対応しているブラウザが分かります。
mozilla系、webkit系は頭に

mozilla系（FireFox等）　→　「-moz-」
webkit系（Google Chrome, Safari）　→ 「-webkit-」

をつけると対応するようです。

-moz-border-radius: 10px;
-webkit-border-radius: 10px;

■mozillaで一辺づつ指定する場合
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;

■webkitで一辺づつ指定する場合
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;

ちなみに、IE、Operaは基本的に未対応です。

IE、Operaで角丸にする

IEの場合はビヘイビアファイルを使うことで同じような効果を出すことができます。
いくつかあるようでした。

http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
http://www.akatsukinishisu.net/itazuragaki/css/nifty_corners_behavior.html

また、javasriptを読み込むことで対応する方法もあります。
こちらは、IE、Opera両方とも対応します。

http://www.html5.jp/library/border-radius.html

ただこのjavascriptは全てのブラウザ用に読み込んでしまうと
正確にレンダリングするブラウザが逆に崩れてしまうのでIEだけに読み込んだほうがいいですね。
※IE8だと正確にレンダリングされません。

余談ですが、このjavascriptどうやらtableタグを生成しているようです。
ここにきてもやっぱりテーブルコーディングに頼るのかっていう感じですね・・。

サンプルコード

CSS3サンプル / border-radius

参考サイト

CSS3 角丸を表現する border-radius - CSS Lecture
CSSだけで角丸を表現する「border-radius」 - CHIBATCH.JP
border-radius