四角枠の角を丸くする方法

たった10分でできるCSSの裏ワザ③

【四角の枠線を角丸にする方法】

●四方全て角丸にする方法
※以下の青枠のことを説明します。

四角枠の角を丸くする方法

四角枠の角を丸くする方法。超~簡単なので皆さんコピペで使ってね!

border-radius: 20px;
border: 3px green solid;     /* 枠線の装飾 */
background-color: #ccffcc;   /* 背景色 */
}

↑ たったこれだけ!背景画像でわざわざ角丸などにする必要ありません!


※ブラウザで分けたいとき※

div.kadomaru {
-moz-border-radius: 20px;    /* Firefox */
-webkit-border-radius: 20px; /* Safari,Chrome */
border-radius: 20px;         /* CSS3 */

ついでに…
●上側の角だけを丸くする方法

div.kadomaru {
/* ▼CSS3 */
border-top-left-radius: 20px;  /* 左上 */
border-top-right-radius: 20px; /* 右上 */

/* ▼Safari,Chrome */
-webkit-border-top-left-radius: 20px;  /* 左上 */
-webkit-border-top-right-radius: 20px; /* 右上 */

/* ▼Firefox */
-moz-border-radius-topleft: 20px;  /* 左上 */
-moz-border-radius-topright: 20px; /* 右上 */

/* ▼共通装飾 */
border: 3px green solid;     /* 枠線の装飾 */
background-color: #ccffcc;   /* 背景色 */
}

 

すっごい簡単じゃないですか?ね?ね?(笑)

ちょっとしたことを知っているだけで、ブラウザの表示が

ものすごく軽量化されるのです。

軽量化される→Googleの評価があがるということなので、
是非とも参考にしてみてください^^

ご購読の皆様、右下からブログ登録してもらえると嬉しいです♪

(迷惑メールに入ってしまうこともあるので、フォルダチェックお願いします。) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【ウェブクリエイトが制作したサイトのPR】
■太陽光を考えている方は絶対必見!屋根よりもカーポートに設置!
http://kmcllc.co.jp/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━