いままでは、webサイトでボタンを作ったり、コラムなどを囲うために4角が角丸になるように画像をわざわざフォトショップを立ちあげて、試行錯誤しながら作っていたのですが、CSS3ならテキストエディタだけで済んでしまいます。
さて、どうするのかというと、CSS3の草案で定められている「border-radius」を使うのです！
表記の仕方は、いままでのCSSと変わりません。
以下のコードだけで角丸ができてしまいます！（草案では・・・）
border-radius： 10px;
意味は、角を丸くするのが10pxの幅でということです。
ただし、これには重要な欠点があり、いまだに草案ということで、全てのブラウザに対応していないのです。
そこで、各ブラウザでも対応できるように、上記のコードに以下を追加します。
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
上のほうが、Safari、Google Chrome用で 下がFirefox用となっています。
さぁ、これで安心しましたね。
CSS対応の未熟なIEは、バージョンの違いもあるので、一切無視です！
市場のシェアだって、たったの54%ぐらいですから。
2人に1人が見れなくてもいいでしょ？
・・・・いやいやいや。
ダメです。
本当に昔から、IEには世話を焼かせてもらっています。
まず、上記のコードでIE9であれば、角丸が表現できるのですが、互換モードによっては、きちんと表現されません。
ですので、htmlのヘッド内に以下を追加してやってつか～さい
<meta http-equiv="X-UA-Compatible" content="IE=IE9" />
そして、それ以下のお馬鹿なIEたちには、jQuery.cornerプラグインを適用させてあげるのです！
まずはここにある、jquery.corner.jsというリンクから、ソースをダウンロードします。
そして、そのソースをサーバにアップロードし、htmlのヘッド内でjquary.jsとともに読み込みます。
（ちなみに以下は、jquaryをGoogleにホスティングされてるものから読み込んでいます。）
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script src="js/jquery.corner.js"></script>
そして、この後に、角丸にしたい要素を指定します。
例えば、idが「kakumaru」のものに10pxの角丸を設定したいのであれば、
<script type="text/javascript">
$('#kakumaru').corner("10px");
</script>
そうすると、「id="kakumaru"」なものに角丸が適用されます。
