CSSで角丸を作る

css

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用*/
カテゴリーcss

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です