【CSS】角丸を表示する時のベンダープレフィックス -moz-border-radius が Firefox で効かなくなっていた件

本当に今更なことなのですが、CSS3で角丸の作り方。
css で border-radius を指定する方法。

角丸(border-radius)指定方法

構文

これで、全部の角が 5px 分の丸みを持ちます。
特定の角だけを丸めたい場合は以下のようにします。

左上

右上

右下

左下

-webkit と -moz というプレフィックスをつけるのは、
-webkit- が、Safari 及び Google Chrome、
-moz- が Firefox

という風に、ブラウザ対応のためです。

と、ここまでは知っていたのですが、Firefox で角丸を施した部品を確認してみると、なっていませんでした。
原因を調べてみるとなんと、-moz-border-radius がFirefox13 以降バージョンでは効かないということでした。

Ver.13 以降の場合はプレフィックスを省いた「border-radius: 5px;」という書き方で反映するとのこと。

なので、まとめると以下のようにして書くと、対応しているブラウザで全て反映するようです。

それより前にしっかりとブラウザで確認しろよ、って話ですね (^_^;)

2015年10月現在での border-radius の書き方

構文

値

値の意味は以下のとおり。

• 値が 1 つ指定された場合、4つの角のすべて にその値が適用される。
• 値が 2 つ指定された場合、1 番目の値は top-left および bottom-right に、2 番目の値は top-right および bottom-left に適用される。
• 値が 4 つ指定された場合、それらは指定された順に top-left, top-right, bottom-right, bottom-left に適用される。
• 値が 3 つ指定された場合、2 番目の値が top-right および bottom-left に適用される。
• 2 つの値セットがスラッシュにより区切られている場合、スラッシュより前の値は水平方向の径に、スラッシュより後の値は垂直方向の径となる。スラッシュが省略された場合、値は水平方向と垂直方向の径になる。

例

参考にしたページ

[tgAmazonItemLookup asin="4861462037" related="1"]

-HTML,CSS
-border-radius, firefox, 角丸