messalibertyのサイトにも使われている角丸は『curvyCorners』というjavascriptライブラリを利用して表現しています。

curvycorners

すごくキレイな角丸を表現できるのですが、少し重いのが難点です。
近いうちに更新したいと思いますが、社内にてリクエストもあったのでこの機会にメモとして『curvyCorners』の設置の仕方を紹介します。

1. まずは配布サイトからcurvycorners.jsファイルをダウンロードし、以下のようにheaderにて読み込みます。

<script type="text/javascript" src="curvycorners.js"></script>

2. 次に角丸を適用したいblock要素をclass属性を付けて配置します。

上部に角丸を適用

<div class="myboxtop">
上部のみ角丸が適用されます。<br />
上部のみ角丸が適用されます。<br />
上部のみ角丸が適用されます。<br />
</div>

下部に角丸を適用

<div class="myboxbottom">
下部のみ角丸が適用されます。<br />
下部のみ角丸が適用されます。<br />
下部のみ角丸が適用されます。<br />
</div>

上下に角丸を適用

<div class="myboxall">
上下に角丸が適用されます。<br />
上下に角丸が適用されます。<br />
上下に角丸が適用されます。<br />
</div>

以上のようにclassを設置し、次はjsファイル内のスクリプトを編集します。

3. 以下の項目にて角丸の設定をします。

上部のみ10pxの角丸を設定

settingsTop = {
 tl: { radius: 10 },
 tr: { radius: 10 },
 bl: { radius: 0 },
 br: { radius: 0 },
 antiAlias: true,
 autoPad: true,
 validTags: ["div"]
}

下部のみ10pxの角丸を設定

settingsBottom = {
 tl: { radius: 0 },
 tr: { radius: 0 },
 bl: { radius: 10 },
 br: { radius: 10 },
 antiAlias: true,
 autoPad: true,
 validTags: ["div"]
}

上下に10pxの角丸を設定

settingsAll = {
 tl: { radius: 10 },
 tr: { radius: 10 },
 bl: { radius: 10 },
 br: { radius: 10 },
 antiAlias: true,
 autoPad: true,
 validTags: ["div"]
}

[補足]
tl(top left): 左上の角丸
tr(top right): 右上の角丸
bl(bottom left): 左下の角丸
br(bottom right): 右下の角丸
antiAlias: アンチエイリアス適用の有無(true or false)
autoPad: margin設定の有無(true or false)
validTags→curvyCornersの適用されるタグの選定（カンマ区切りで複数設定可）

4. それぞれの設定をclassに適用します。

      myBoxObject = new curvyCorners(settingsTop, "myboxtop");
      myBoxObject.applyCornersToAll();

      myBoxObject = new curvyCorners(settingsBottom, "myboxbottom");
      myBoxObject.applyCornersToAll();

	  myBoxObject = new curvyCorners(settingsAll, "myboxall");
      myBoxObject.applyCornersToAll();

以上で、それぞれのclassを設定するだけで面白いほど簡単に角丸が適用されます。
あとは軽くなれば良いのですが…。