CSS3で角丸を実現するborder-radiusのコピペ用まとめ | VIVID COLORS DESIGN -ビビッドカラーズデザイン-

VIVID COLORS DESIGN -ビビッドカラーズデザイン-

まいにちたのしくものづくり。


テーマ:
毎度書くのが煩わしいので、
よく使う組み合わせの角丸CSS3をまとめて単語登録しておこうかと思ってまとめました。

といいつつ単語登録めんどくさくて
このページ見てコピペで済ませそうな私がみえる…!

ということで角丸いろいろ。

自分のサイトは
角丸はほぼCSS3使ってやってます。

最近はお仕事のサイトでも角丸はCSS3でやるようになってきました。

他のことに時間とお金を使った方がイイ!

早くどのブラウザでも実現できるようになるといいのになぁ…!

みなさんは角丸、どうしていますか???


/*全体角丸*/
border-radius: 6px; /* CSS3草案 */
-webkit-border-radius: 6px; /* Safari,Google Chrome用 */
-moz-border-radius: 6px; /* Firefox用 */

/* 左上のみ角丸 */
border-top-left-radius: 6px;
-webkit-border-top-left-radius: 6px;
-moz-border-radius-topleft: 6px;

/* 右上のみ角丸 */
border-top-right-radius: 6px;
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topright: 6px;


/* 左下のみ角丸 */
border-bottom-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-bottomleft: 6px;


/* 右下のみ角丸 */
border-bottom-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-bottomright: 6px;


/* 上のみ角丸 */
border-top-left-radius: 6px;
border-top-right-radius: 6px;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;


/* 下のみ角丸 */
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-bottomleft: 6px;
-moz-border-radius-bottomright: 6px;



/* 右上・左下のみ角丸 */
border-top-right-radius: 6px;
border-bottom-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomleft: 6px;


/* 左上・右下のみ角丸 */
border-top-left-radius: 6px;
border-bottom-right-radius: 6px;
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomright: 6px;

YUKIさんをフォロー

ブログの更新情報が受け取れて、アクセスが簡単になります

Ameba人気のブログ

Amebaトピックス