“Web2.0”っぽいWebデザインの定番、角丸ボックス。実際、ここ数年、サイドメニューやナビゲーションバーなどに角を丸くしたブロック要素を多用するサイトを目にする機会が増えています。 ところがこの角丸ボックス、(X)HTMLとCSSだけで実現するには、コーナー部分の背景画像を用意したりCSSを書き足したりと、意外に手間がかかって面倒です。現在、W3C(World Wide Web Consortium )で策定が進められているCSS3(CSS level 3)では、ブロック要素の角を丸くできる border-radiusプロパティが追加される予定ですが、現在のところCSS3は一部のWebブラウザーしか対応していませんし、border-radiusプロパティの実装状況にもばらつきがあります(Firefoxの -moz-border-radius、Safariの -webkit-border
![3分でできるJS+CSS「角丸」テクニック (1/3)](https://cdn-ak-scissors.b.st-hatena.com/image/square/522c6999459ddf143a2c2436ab80a93c8ad18973/height=288;version=1;width=512/https%3A%2F%2Fascii.jp%2Fimg%2F2009%2F05%2F13%2F1570377%2Fl%2F031b4b8dd7224973.jpg)