CSS3を使って角丸を表現する方法

今ままで画像で対応していた表現がCSS3の出現によりカンタンに表現できるようになりましたね。

その中で最もよく使われている（と思う）角丸の表現を紹介します。

border-radiusの記述で簡単に角丸が表現できる！

角丸表現したいCSSにborder-radiusの記述をするだけでOKです。
以下サンプルコードになります。

.demo   {  
    border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */  
}  

特定部分だけ角丸にする

左上と右上だけ角丸にしたい・・・なんてこともありますよね。
-webkit-border-radiusのborder-と-radiusの間に-top（またはbottom）と-left（またはright）を追加してやればOKです。
角丸にしたい部分を上下左右で指示してやれば簡単に表示されます。

以下サンプルコードになります。

.demo   {  
    -webkit-border-top-left-radius: 10px;  
    -webkit-border-top-right-radius: 10px;  
    -moz-border-radius-topleft: 10px;  
    -moz-border-radius-topright:10px;  
}  

IEに対応させるには？

残念ながらIE8以前のものは表示されません。
IE8以前で角丸を表示させるなら、Javascriptを使って表示させます。

curved-corner - CSS curved corner - Google Project Hosting
上のサイトからダウンロードをして、CSSに以下の記述を追加します。

.demo{
   behavior: url(border-radius.htc);/*for IE*/
}

まとめ

スマホサイト作成するときに大活躍のCSSでの角丸表現。
実装も非常にシンプルでカンタンなので、みなさんぜひぜひ活用してください。