【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 では角丸の外にはみ出せないものとして解釈されるようだ。

Safariで表示した図
Safariで表示した図

Firefoxで表示した図
Firefoxで表示した図

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で表示した図
Firefoxで表示した図。4つの角丸を個別に指定できている。

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

まとめ

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

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

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

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

Internet Explorer 8 ×
Firefox 3.5.5
Safari 4.0.4
Google Chrome 3.0.195.38
Opera 10.10 ×
Opera 10.50

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

  • 2010年3月20日追記: Opera10.50でテストしてみたところ、border-radiusに対応されたようです。4つ角個別指定もでき、Firefoxと同様の実装なようです。
  • 2010年3月20日追記: Google Chrome 4.1.249.1036 も、4つ角個別指定に対応されているようです。
  • 2010年11月23日追記: XPERIA に搭載のブラウザ(AppleWebKit/528.5+)も、4つ角指定のときのみ無効になりました(1つ指定なら効く)。おそらく、WebKit 533 あたりを境に4つ角指定に対応したのかも知れません(未確認)。

プロフィール

コヤナギ トモヤ

ウェブ系エンジニアしてます。ウェブデザイナー、ウェブディレクターとしてウェブ制作の仕事に携わり、今はエンジニア職に流れ着きました。誰かのお仕事をちょっとだけ効率化するような支援ツールの開発が好き。オープンソースとMITライセンス大好き。人生後半は自由と民主主義のコントリビューターとして過ごす予定。

ウェブ制作支援ツール Pickles 2 をオープンソースで開発しています。

PHP/JavaScript/NodeJS/nwjs/Laravel/Pickles2/オープンソース/心理学/倫理/自由と民主主義

RSSフィード

ページの先頭へ戻る