【HTML & CSS】 border-radiusプロパティで角を丸くする

予算の都合上、Webデザイナさんが入ってくれないwebシステムで、
プログラマだけで何とかちょっとでもマシなデザインを作るために、知っておくといいかもしれないスタイルシートプロパティを紹介していきます。

まずはボックスの角を丸くする方法です。
今までは画像を使って角丸を実現してきましたが、CSS3からはスタイルシートを使って簡単に角丸を実現できるようになりました。

時間が無かったり、めんどくさかったりで、ただ罫線で囲んだだけの味気ないボックスを
ほんの少し角を丸くするだけで、すこしはマシなデザインになるかも?です。

ボックスの4隅の角を丸くする

まずは、ボックスの4隅の角をまとめて丸くする方法です。
border-radius: 20px;


4隅の角をそれぞれ指定するには、border-radius: 左上 右上 右下 左下; と指定します。
border-radius: 20px 30px 40px 50ox;


4隅の角の指定を100%にすると、円も表現できます。



他にも指定方法は色々あります。
複雑な事はしないので、基本的な設定方法だけまとめてみました。

border-radiusの各ブラウザ対応状況

border-radiusプロパティはCSS3の機能で一部のブラウザではベンダープレフィックスを使用する必要がありますが、
border-radiusのサポート状況からベンダープレフィックスは必要なさそうです。

IE	IE9よりサポート
Chrome	Chrome5.0よりサポート
Firefox	Firefox4.0よりサポート
Safari	Safari5.0よりサポート
iOs	iOS4.0よりサポート
Android	Android2.2よりサポート

border-radiusの設定を簡単に作成するツール

たとえばコチラ CSS matic のような設定ツールを使うと、border-radiusの設定が簡単に作成・確認できます。