ほりくり@ほりでぃWebクリエーター

CSSも画像も使わないで丸角を実装

投稿日:2012年8月30日

CSS3は便利だけどIEに対応していない。
またブラウザごとの指定が必要。

.box   {  
    border-radius: 10px;
    -webkit-border-radius: 10px;    /* Safari,Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */  
}  

画像で丸角を表現するのが確実だけど
画像を用意するのが面倒。


CSS3も画像も使わずにJavaScriptで表現する方法もあります。


下記サイトよりJSをダウンロード
http://www.curvycorners.net/




ダウンロードしたファイルを解凍し
フォルダ内に入っている『curvycorners.js』を任意のディレクトリにアップロード。

ヘッダ内に下記コードを記述
<script type="text/JavaScript" src="アップロードしたディレクトリパス/curvycorners.js"></script>
<script type="text/JavaScript">
  addEvent(window, 'load', initCorners);
  function initCorners() {
    var settings = {
      tl: { radius: 10 },
      tr: { radius: 10 },
      bl: { radius: 10 },
      br: { radius: 10 },
      antiAlias: true
    }
    curvyCorners(settings, ".marukado_box");
  }
</script>

tl(左上)、tr(右上)、bl(左下)、br(右下)のそれぞれも丸みを指定します。
「marukado_box」ところで対象となるクラス名、ID名を指定します。

▼デモ
CSS3も画像も使わない丸角

IEでもちゃんと角が丸くなります。