CSSで作成する角丸ボックスについて[CSS]

CSS.1

div.rounded {
    background-color: #666;
    color: #fff;
    font-weight: bold;
    padding: 10px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

CSS.2

.alert {
    border: 2px solid #fc0;
    padding: 8px 10px;
    font-size: 120%;
    color: #c90;
    font-weight: bold;
    background-color: #ff9;
    -moz-border-radius-topleft: 8px;
    -webkit-border-top-left-radius: 8px;
    -moz-border-radius-bottomright: 8px;
    -webkit-border-bottom-right-radius: 8px;
}

    -moz-border-radius
    -webkit-border-radius
    -moz-border-radius-topleft
    -webkit-border-top-left-radius
    -moz-border-radius-bottomright
    -webkit-border-bottom-right-radius

デモページはコチラから

上記のCSSにあるようにこれらプロパティを指定すれば、画像無しで角丸ボックスを作ることができます。

ですが、これらはFirefox、Safariの独自拡張です。つまり、FirefoxやSafariのみ有効のプロパティです。

    -moz-border-radius
    -webkit-border-radius
    -moz-border-radius-topleft
    -webkit-border-top-left-radius
    -moz-border-radius-bottomright
    -webkit-border-bottom-right-radius

Firefoxの独自拡張

    -moz-border-radius
    -moz-border-radius-topleft
    -moz-border-radius-bottomright

Safariの独自拡張

    -webkit-border-radius
    -webkit-border-top-left-radius
    -webkit-border-bottom-right-radius

他のIEやOperaには無効のプロパティです。このデモページをIEやOperaで見れば、角丸のボックスになっていないことがわかると思います。

結論として、すべてのブラウザに対応させるためには、これまで考察されてきたように下記のような画像を用いる方法でCSSを組むことがやはり良いと思います。

CSS

.contentplace {
	background-color:rgb(192,255,0);
	color:#000000;
	width: 600px;
}

.contentplace p { 
	margin: 0 10px 0 10px;
}
.topplace{ 
	background: url(wc1.png) no-repeat top right; 
}
.bottomplace { 
	background: url(wc2.png) no-repeat top right; }
img.placeborder {
	width: 20px;
	height: 20px;
	border: none;
	display: block !important;
}

XHTML

<div class="contentplace">
   <div class="topplace">
	<img src="wc0.png" alt="" width="15" height="15" class="placeborder"  style="display: none" /></div>
<p>テスト、テスト、テスト</p>
   <div class="bottomplace">
	<img src="wc3.png" alt="" width="15" height="15" class="placeborder"  style="display: none" /></div>
</div>

デモページはコチラから