CSS3でボックス要素の角を丸くする


CSS3ではグラデーションやシャドウなど、
webページの見た目をリッチにする機能が沢山用意されています。

その中でも今回は、ボックス要素の角を丸くする方法について、
簡単にまとめてみました。

基本

これだけです。
値の単位には、pxem%などが使えます。

実際にやってみましょう。
わかりやすくするためにbackground-color等を合わせて指定しています。

数値を大きくすれば、角丸の半径が大きくなります。
以下は20pxに設定した例です。

コーナーそれぞれに対応させる

上記のborder-radiusで値を一つだけ指定すると、ボックスの角4箇所全てに反映されます。
コーナー毎に設定したい場合の方法としては、例えば以下のようなプロパティ使う方法があります。

  • border-top-left-radius(左上)
  • border-top-right-radius(右上)
  • border-bottom-left-radius(左下)
  • border-bottom-right-radius(右下)

以下のようにすれば左上と右下だけ丸角にできます。

楕円にする

値をスペースで区切って2個指定すると、
それぞれ水平方向、垂直方向の半径に反映され、
楕円形の角が作れます。

capture

古いブラウザでも対応させる

上記はCSS3標準の書き方で、
最新のブラウザであればこれで大丈夫ですが、
古いブラウザも対応させようと思ったら、以下のような書き方が必要になります。

なぜこんな書き方をしなければならないのか

私も詳しいことは知りませんので、間違ってたらごめんなさい……
上記の「border-radius」の前にくっついてる「-moz-」や「-webkit-」は
ベンダープレフィックスと呼ばれているもので、
ブラウザそれぞれに独自に用意されたCSSプロパティです。

これは、CSS3の仕様がまだ正式に策定されていない為、
仕様が変わった際にデザインが崩れないように、
ブラウザベンダーそれぞれが用意しているんだとか。

ただ、最新のブラウザではベンダープレフィックスを付与しない方でも
動くようになっている来ているので、
「もう付けなくても良いんじゃないか」っていう意見もあるようです。

よって、最新のブラウザのみを対応にするのであれば、
一つだけ用意すれば良いんじゃないかと思います。
古いブラウザでも同じデザインにしたいって場合は、
付けておいた方が無難かもしれませんね。

以前紹介したコード記述をリアルタイムで閲覧できるサイトcode playerでは、
まず標準の書き方をした後、
行をコピペして各ベンダープレフィックスを付与しているサンプルが多かったです。
とりあえずはそんな感じでいくのが無難かな。

コメントする