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

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

角丸(border-radius)指定方法

構文

[css]
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
[/css]

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

左上

[css]
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
[/css]

右上

右下

[css]
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
[/css]

左下

[css]
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
[/css]

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

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

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

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

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

[css]
-webkit-border-bottom-right-radius: 5px; /* Safari,Google Chrome */
-moz-border-radius-bottomright: 5px; /* Firefox12まで */
border-radius-bottomright: 5px; /* Firefox13以降 */
[/css]

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

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 つの値セットがスラッシュにより区切られている場合、スラッシュより前の値は水平方向の径に、スラッシュより後の値は垂直方向の径となる。スラッシュが省略された場合、値は水平方向と垂直方向の径になる。

例

[css]
border-radius: 1em/5em;
/* これは次に等価である */
border-top-left-radius: 1em 5em;
border-top-right-radius: 1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius: 1em 5em;
[/css]

[css]
border-radius: 4px 3px 6px / 2px 4px;
/* これは次に等価である */
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius: 3px 4px:
[/css]

参考にしたページ

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

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