Firefoxだとこう書けるけどsafariやchromeではショートハンドが使えないので丸めたい角ごとに指定しないとダメみたい。
-moz-border-radius:左上 右上 右下 左下;
しかもmozとwebkitで指定が違う(面倒くさいなぁ)。
-moz-border-radius-topleft = -webkit-border-top-left-radius
-moz-border-radius-topright = -webkit-border-top-right-radius
-moz-border-radius-bottomleft = -webkit-border-bottom-left-radius
-moz-border-radius-bottomright = -webkit-border-bottom-right-radius
プレフィックスを外した時どちらが正式な記述なんだろうか?
[追記 / 20100903]
下記リンクを参考にするとどうやらwebkitの方が仕様に沿っているようですね。
CSS Backgrounds and Borders Module Level 3
[追記ここまで]
-moz-border-radius-topleft = -webkit-border-top-left-radius
-moz-border-radius-topright = -webkit-border-top-right-radius
-moz-border-radius-bottomleft = -webkit-border-bottom-left-radius
-moz-border-radius-bottomright = -webkit-border-bottom-right-radius
コメント