画像を使わずにCSSだけで角丸を作る方法、PART2

「画像を使わずにCSSだけで角丸を作る方法、PART1」では、HTMLタグを何個にも重ねて角丸を作る方法でしたが、今回は角丸用のCSSプロパティを使って実現する方法です。

CSSで角丸

下記のコードだけで実現できます。

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

いろんな角丸を試してみた

サンプル

大変便利なborder-radiusですが、このプロパティはWebkit系(Safari、Chrome)とGecko系(Firefox)のみにしか適用されません。IEやOperaにも実装させるならJavaScript等を使用します。

JavaScriptで角丸

「CSSだけで角丸を作る方法」と題してるのにJavaScriptでの方法を紹介するのはどうかと思いますが、結構役立つ方法なので紹介しちゃいます。

まず、HTML5.JPさんのライブラリからborder-radius.jsをダウンロードします。

headタグで、border-radius.jsをロードするようscriptタグを記述しておきます。

 
<script type="text/javascript" src="../html5jp/border-radius.js"></script>
 

角を丸くしたいブロックボックス要素のclass属性に "html5jp-border-radius" を記述します。

 
<script type="text/javascript" src="../html5jp/border-radius.js"></script>
 

これだけでIEでもOperaでも角丸が表現できます。

border-radius.js - HTML5.JP border-radiusプロパティで角丸のボックスを指定する - MdN