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

スポンサードリンク

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

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; /* 右下 */

雑感

スポンサードリンク

この記事が気に入ったら、ぜひシェアをお願いします!

1 個のコメント

  • コメントを残す

    メールアドレスが公開されることはありません。