角を丸くするCSS

今までね～

サンプル
サンプル
サンプル

 上のような感じにね、食べに行ったお店の住所とか、電話番号を
四角で囲んでたんだけどね～。

どーも、この四角四面な感じが、ちょっとなんだかなぁ～って思ってね。
・・・で、角を丸くしたいなぁ・・・って。
やっぱ、角が丸いほーが、優しい感じするでしょ（笑

早速ググる。。。

あった、 All About　に方法が載ってた。

——————————————————————–

▼more

・・・で、早速やってみた。

まず、
1)　テーマ編集のスタイルシートに下記を追加

 /* ———- kadomaru ———- */
.kadomaru {
border-radius: 10px;         /* CSS3 */
-moz-border-radius: 10px;    /* Firefox */
-webkit-border-radius: 10px; /* Safari,Chrome */
background-color: #D3D3D3;   /* 背景色 */
margin: 10px;    /* 上下左右のマージンは10px */
padding: 10px;    /* 上下左右の余白は10px */
}

色は、blogのイメージ色のグレーを基調にするので#D3D3D3・・

後、Firefox   Safari  Chrome　に対応するよーにってことで・・
IEやOperaだと見えないって書いてあったけど
結果からいうと、E9でも、角丸に見えたよ。

えーっと、次に、
2）　前から入れてるプラグインのAddQuicktagにタグを追加。

ボタン名、かどまるって入れて
開始タグに、<div class=”kadomaru”><p>って入れる。

後は、記事書くときに、四角で囲いたいトコに、AddQuicktag入れればOK。

テスト
テスト
テスト

上記のテスト文字に・・・

<div class=”kadomaru”><p>テスト
テスト
テスト</P></div>

・・・、角が丸くなって表示されたよ。