【CSS3】 border-radius を試してみた。

そろそろCSS3に触れておいた方がよいかなと思い始めたので、手始めに border-radius をやってみることにした。

border-radius は、角を丸くするCSS3の新しいプロパティ。やっかいな角丸ボックスのデザインも手軽に実現できるようになりそうだ。

デモページはこちら。

基本的な使い方

基本的な使い方は次のようにする。

.kadomaru01{
	border-radius:         10px;
	-moz-border-radius:    10px;
	-webkit-border-radius: 10px;
	-o-border-radius:      10px;
	-ms-border-radius:     10px;
	padding:5px;
}

これを表示すると、次のような角丸スタイルが得られる。

• ※わかりやすくするために別途ボーダーをつけ着色してあります。

Firefoxで表示した図

border-radius に指定する値は、角丸の直径になるようだ。

ちなみに、-moz-、-webkit-、-o-、-ms- はベンダープレフィックスといって、将来の仕様をブラウザが先行実装するときにつけるものらしい。だから、将来的には border-radius だけ指定すればよくなる。

• ※Opera(-o-) と IE(-ms-) のベンダープレフィックスも一応指定してみてはいるが、対応していないため効いていない。

角丸から文字をはみ出させる実験1

次の実験は、padding をゼロにして、角丸を大きくしてみたもの。

.kadomaru02{
	border-radius:         30px;
	-moz-border-radius:    30px;
	-webkit-border-radius: 30px;
	-o-border-radius:      30px;
	-ms-border-radius:     30px;
	padding:0px;
}

Firefoxで表示した図

文字が角丸からはみ出すのがわかる。

角丸から文字をはみ出させる実験2

次は、そこにさらに overflow:hidden; を加えたもの。

.kadomaru03{
	border-radius:         30px;
	-moz-border-radius:    30px;
	-webkit-border-radius: 30px;
	-o-border-radius:      30px;
	-ms-border-radius:     30px;
	padding:0px;
	overflow:hidden;
}

ここで、Firefox と WebKit系(Safari/Chrome) とで解釈の違いがでた。Firefox では overflow はあくまで矩形で解釈され、角丸の外にはみ出すことができるのに対し、WebKit では角丸の外にはみ出せないものとして解釈されるようだ。

4つの角を個別に指定する実験

最後に、値を4つ指定してみた。

.kadomaru04{
	border-radius:         10px 20px 30px 40px;
	-moz-border-radius:    10px 20px 30px 40px;
	-webkit-border-radius: 10px 20px 30px 40px;
	-o-border-radius:      10px 20px 30px 40px;
	-ms-border-radius:     10px 20px 30px 40px;
	padding:20px;
}

左上、右上、右下、左下の順に個別に指定できるようだ。ただし、これができたのはFirefoxのみで、WebKit系(Safari/Chrome) では無視される(角丸にならない)。当面は使えそうにない。

Firefoxで表示した図。4つの角丸を個別に指定できている。

Safariで表示した図。個別指定はできないらしく、完全に無視されてしまった。

まとめ

これまで、角丸を表現するためにどれほどの工数をかけてきたことか。それがこの border-radius によってたやすく実現できるようになるなんて、なんとスバラシイことだろう。

でも残念ながら、現時点では IE(-ms-) と Opera(-o-) が未対応で、Firefox と WebKit(SafariとChrome) でしか確認できない。まだしばらくは使えなそうだ。Opera と IE が対応した頃に、もう一度やってみたい。

今回の実験に使ったデモページはこちらからダウンロード。

今回の実験に使ったブラウザのバージョンは下記の通り。

次回は同じくCSS3の新しいプロパティ border-image に挑戦してみようと思う。