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

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

border-radius のサンプル

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「角丸」テクニック

1 COMMENT

コメントを残す

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