ブログの角丸部分をCSS3の「border-radius」プロパティに変えてみた【Webデザイン】

1年以上前の記事です。内容が古い可能性があります。

今年、HTML5及びCSS3が正式に勧告されるなんて言われていますが、いつ頃なんでしょうかね？
いずれにしてもそろそろ当ブログもCSS3を盛り込んだコーディングに変えていこうということで、まずは、角丸部分をCSS3で書いてみることにしました。
右のメニューの部分です。見た目は変わっていませんが、CSS3になってます。
（古いブラウザだと角丸じゃなくてソリッドな直角になってると思います。 ）
ちなみに上のヘッダー部分はオール画像。

ここで、CSS2での角丸囲みの作り方の解説を簡単にしておきます。
DIVを3分割してそれぞれ上用の画像、下用の画像、ボディ用の画像（background-colorでも可）を用意してバックグランドに敷くというかたちにすればOK。
図で表すとこんな感じです。

これがCSS3では一つのDIVでよくなったのです。

「background-image」を削除すると、角が直角になってしまいますので、そのDIV自体、もしくはそれを囲むDIV（この場合は子DIVの「background-color」を消しておく）に対して角丸の指定をしてあげます。
これがCSS3で使えるようになる「border-radius」プロパティです。

「border-radius」プロパティは以下のように書いて使います。

border-radius: 10px 10px 10px 10px;

それぞれ「左上、右上、右下、左下」のRの半径を指定します。
（4辺が同じRであれば「boader-radius:10px」だけでも構いません）

なお、左右（X軸）と上下（Y軸）とをわけて指定することもでき、その場合は以下のように書きます。

border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;

左から「左上X、右上X、右下X、左下X / 左上Y、右上Y、右下Y、左下Y」となります。

自分のブログデザインの場合は、ベースにしているテンプレートのナビゲーション部分が上下二つのDIVに分かれているので、background-imageを消したDiVに対してそれぞれ、上の部分のみ角丸、下の部分のみ角丸とわけて書いています。
記述の仕方は以下のとおりとなります。

div#sub {
	/* ここ中略 */
	border-radius:10px 10px 0px 0px;
}
div#extra {
	/* ここ中略 */
	border-radius:0px 0px 10px 10px;
}

subとかextraとかはDIVタグに書かれていたIDです。
任意ですがそのままにしておきました。

いやぁ。それにしても便利になりますね。
以前は、DIVを3分割していたところ、一つのDIV（ブロックレベル要素）があれば4辺の角丸が指定できてしまうんですから。 

参考） border-radius－CSS3リファレンス