そろそろCSS3に対応した環境も多くなってきてるみたいですね。

IE7とかはもう滅びたらいいと思います。

今回は一番簡単そうな角丸にする方法を紹介してみます。

境界線を角丸にするプロパティ　border-radius　

ボーダーを角丸にするには以下のようにプロパティを変更します。

.example{
	border:1px solid #B2B2B2;
	border-radius:5px;
}

---

【実行例】

---

一辺ずつ指定する

値を一つだけ指定すると全ての角を一度に設定できます。
四辺の一つ一つに角丸を設定したい場合は以下のように修正します。

.example{
	border:1px solid #B2B2B2;
	border-radius: 5px 10px 20px 30px;
　 /*  ↑　左上・右上・右下・左下　の順で指定　　*/
}

【実行例】

---

ちなみに、横幅縦幅をブロックと同じサイズにすると





円ができます。
だからどうしたという話ですが（´ω｀）

もっと頑張ると、
CSS3だけでドラえもんが描けてしまうようです。



　＿＿＿
/　||￣￣||　∧＿∧
|.....||＿＿|| （ 　　　 ）　　XPもそろそろ替え時ですかね。
|￣￣＼三⊂/￣￣￣/
|　　　　|　( ./　　　　 /
　＿＿＿