CSS(スタイルシート)だけで角丸を作る Chrome,Safari,Firefoxのみ
Web2.0といわれ始めたころから、かくかくしたデザインよりも、角が丸いボックスのデザインが取り入れられ始めました。
Internet Explorer(IE)への対応を考えると、画像を用いて処理したり、Javascriptなどを利用する方法がありますが、IEを考えずにChrome,Safari,Firefoxのみの対応を考えると、CSSだけでボックスの角を丸くすることができます。
CSS3に対応したブラウザで見ることができます。
以下、divやtableの角を丸くする方法です。
半径10pxの角ができます。
-webkit-border-radius: 10px; /*Chrome、Safari用*/ border-radius:10px; /*Firefox用*/ -border-radius:10px; /*IE9用*/