[ CSS3 ] 角丸 ( border-radius ) のサンプル

ちょっと訳あって、CSS3 の角丸のサンプルを書いてみました。

– [border-radius のサンプル](https://bowz.info/wp-content/uploads/2010/06/css3-radius-shadow/index.html)

border-radius プロパティは、CSS3 のプロパティなので IE8 で使う事ができませんが、Firefox, Safari, Google Chrome の各ブラウザは、独自拡張として実装されているので、すぐに使う事ができます。

四隅の角を全て丸くする場合の CSS
———————————————————————-

CSS3 用の記述

border-radius: 20px;

Safari, Google Chrome ( Webkit ) 用の記述

-webkit-border-radius: 20px;

Firefox ( Mozilla ) 用の記述

-moz-border-radius: 20px;

実際に使う時は、次のように上の三つをまとめて書いておきます。

border-radius: 20px; /* CSS3 */
-webkit-border-radius: 20px; /* Webkit */
-moz-border-radius: 20px; /* Mozilla */

特定の角だけを丸くする場合の CSS
———————————————————————-

CSS3 用の記述

border-top-left-radius: 20px; /* 左上 */
border-top-right-radius: 20px; /* 右上 */
border-bottom-left-radius: 20px; /* 左下 */
border-bottom-right-radius: 20px; /* 右下 */

Safari, Google Chrome ( Webkit ) 用の記述

-webkit-border-top-left-radius: 20px; /* 左上 */
-webkit-border-top-right-radius: 20px; /* 右上 */
-webkit-border-bottom-left-radius: 20px; /* 左下 */
-webkit-border-bottom-right-radius: 20px; /* 右下 */

Firefox ( Mozilla ) 用の記述

-moz-border-radius-topleft: 20px; /* 左上 */
-moz-border-radius-topright: 20px; /* 右上 */
-moz-border-radius-bottomleft: 20px; /* 左下 */
-moz-border-radius-bottomright: 20px; /* 右下 */

雑感
———————————————————————-

– webkit だと img 要素に直接角丸を指定できる。Firefox は無理。
– JavaScript を使う方法もあるみたい。
– [ASCII.jp：3分でできるJS＋CSS「角丸」テクニック](http://ascii.jp/elem/000/000/416/416811/)