角丸ライブラリ

最近角丸を作る機会が多かったので、今後の為に色々整理してたんですが、公開しておきます。使えそうだったらいじって使ってください。中身の文書を書き換えれば上下左右と可変するように柔軟になっています。また、一部PSDも同封してます。
0501curve.zip

中身はこんな感じ。

ベーシックなタイプ

01：小さ目な角丸

02：大き目な角丸

03：斜線の角丸（背景画像をループ）

04：ストライプの角丸（背景画像をループ）

05：木模様の角丸（背景画像をループ）

06：リボンのついた角丸（背景画像を固定）

4つ角をの内側を透過GIFにしてるので、大枠の背景を変えれば発想次第で色々と使えると思います。HTMLとCSSは大体こんなんです。divが多いのがちょっと嫌な感じですが。はてな内ではspanでやってたりもします。

HTML

<div class="curve-01">
<div class="curve-head"><div></div></div>
<p>テキスト</p>
<div class="curve-bottom"><div></div></div>
</div>

CSS

.curve-01{
 background:#E0E9FA; /* ここの色を変えたら色んな角丸ができる */
 margin:5px 0;
}
.curve-01 div.curve-head{
 font-size:1px;
 height:5px;
 background:url(01-curve-left-head.gif) top left no-repeat;
}
.curve-01 div.curve-head div{
 font-size:1px;
 height:5px;
 background:url(01-curve-right-head.gif) top right no-repeat;
}
.curve-01 div.curve-bottom{
 font-size:1px;
 height:5px;
 background:url(01-curve-left-bottom.gif) bottom left no-repeat;
}
.curve-01 div.curve-bottom div{
 font-size:1px;
 height:5px;
 background:url(01-curve-right-bottom.gif) bottom right no-repeat;
}

画像を使ったちょい複雑なタイプ

07：エンボスがついた角丸

08：ドロップシャドウがついた角丸

09：内側にシャドウがついた角丸

10：2重シャドウがついた角丸

11：4つ角がピンでとめられた角丸

12：グラデーションのかかった角丸

上中下の左右に画像をおいて囲んでいます。とりあえずモノトーンで準備しておいてます。

HTML

<div class="curve-07-head"><div></div></div>
<div class="curve-07-body">
<div>
<p>テキスト</p>
</div>
</div>
<div class="curve-07-bottom"><div></div></div>

CSS

.curve-07-head{
 font-size:1px;
 height:7px;
 background:url(07-curve-right-head.gif) top right no-repeat;
 margin-top:5px;
}
.curve-07-head div{
 font-size:1px;
 height:7px;
 background:url(07-curve-left-head.gif) top left no-repeat;
}
.curve-07-body{
 background:url(07-curve-left-middle.gif) top left repeat-y;
}
.curve-07-body div{
 background:url(07-curve-right-middle.gif) top right repeat-y;
}
.curve-07-bottom{
 font-size:1px;
 height:7px;
 background:url(07-curve-right-bottom.gif) bottom right no-repeat;
 margin-bottom:5px;
}
.curve-07-bottom div{
 font-size:1px;
 height:7px;
 background:url(07-curve-left-bottom.gif) bottom left no-repeat;
}