HTMLとスタイルシートの組み方
準備ができたら、curvyCornersで角を丸くしたい部分のHTMLを組みましょう。といっても、基本的にはその要素に任意のID名かクラス名を割り当てるだけです。curvyCornersは、後からJavaScriptでIDやクラスから要素を特定し、特定した要素の角を丸くする処理を実行する仕組みとなっています。
角を丸くしたいブロック要素には、通常のHTMLと同じように、スタイルシートで背景色などの書式を指定できますが、1つ注意点があります。筆者が試したところ、padding-topプロパティを指定してcurvyCornersを適用すると、Webブラウザーによっては padding-top が利かなくなってしまうケースがありました。そこで、padding-top を設定したい場合は要素を入れ子にして、内側の要素に padding-top を指定し、外側の要素にcurvyCornersを適用するようにしましょう。
curvyCornersを使った例
たとえば、上のサンプル画面右側にある「After」の角丸ボックスは、次のようにHTML／CSSを組んでいます。外側のdiv要素（ID名「test_b」）にcurvyCornersを適用し、内側の要素（ID名「test_inner」）に padding の値を指定しています。
■padding-top を設定する場合のHTMLの例
<div id="test_b"> <!-- この要素にcurvyCornersを適用する -->
<div id="test_inner">
After<br />curvycorners.jsを使うと、角丸を簡単に実現することができます。
</div>
</div>
■スタイルシートの例
#test_b { background-color : #0000ff; color : #ffffff; margin-right : 20px; width : 300px; float : left; }
#test_inner { padding : 10px; }
このほか、スタイルシートの borderプロパティを使って周囲を線で囲んだり、background-imageプロパティを使って背景画像を指定できます。ただし、borderプロパティで使用できるのは実線（solid）のみで、点線などは指定できません。
borderプロパティで要素の周囲に線を引いたり（左の画面）、background-imageプロパティで背景画像を指定してもよい（右）
