角を丸くしてみたい

このブログを始めた時からエントリー表示部の角を取りたいと思っていた。
しかし・・・しかしである。。
ブログやCSSの事を全く知らない私には無理です。（笑）
そこで、とりあえず色々覚える意味も兼ねて違う所のカスタマイズを行って来た。
そろそろ挑戦してみる事にしてみたよっヽ(´▽｀)/ わ～い♪
まず最初に「Google」で調べ、「Nifty Corners」を参考にやってみました。
とりあえず私は英語が解らない・・・Σ(゜∇゜|||)はぁうっ!
「Google」に直訳ですが和訳してくれるページが有るので実行。
意味が・・・わからない・・・(〃∇〃) てれっ☆
「SuperUser」さんに解説？サンプルが有ったのでやってみました。
ｃｓｓ部分に

#container{
margin: 0 0%;
background: #0000cc;
}
b.rtop, b.rbottom{
display:block;
background-image: url("http://ap-house.com/KD002i.gif");
}
b.rtop b, b.rbottom b{
display:block;
height: 1px;
overflow: hidden;
background: #0000cc;
}
b.rtop b.r4, b.rbottom b.r4{
margin: 0 1px;
height: 2px;
}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
p{padding: 10px;}
h1{padding: 10px;}

を追加し、次に何処を丸くするかで・・・私はテストを兼ねて日付部分にしてみました。

<div id="container"> <b class="rtop"><b class="r1"></b><b class="r2"></b> <b class="r3"></b><b class="r4"></b></b> <!--content goes here --> ここに日付 <b class="rbottom"><b class="r4"></b><b class="r3"></b> <b class="r2"></b><b class="r1"></b></b> </div>
とやってみました・・・がっ・・
少しカクカクしてるし。。。日付部分が大きくなっちゃいました。
少し修正すれば出来るのかなぁとも思っていますので、がんばってみます。
そこよりも気になるのが、同一日のエントリーです。
この様に青いラインが出来てしまいました。
エントリー部分なら問題は、なさそうですが・・・
やっぱり画像を使った角丸の方が綺麗なのかなと思いました。
時間が有る時に画像を使った方もやってみたいと思います。