超個人的覚え書きです。
CSS に border-radius
といういわゆる角丸を作るプロパティがあるんだけど、今のところ Mozilla系(Gecko エンジン)と Safari(Webkit)はそれらを独自拡張のプロパティで採用している。
実際に使うとこんな感じ。
- Mozilla系(Gecko エンジン)
-moz-border-radius: 10px;
- Safari(Webkit)
-webkit-border-radius; 10px:
で、ここまではまぁ良いんだけど、角別(右上だけ、とか)で指定しようとするとプロパティが両者で微妙に違うので間違えやすい。
Mozilla系 は radius
の後に top
とかなのに対して Webkit の場合は raius
の前に top
とか書いてあげる必要がある。
Webkit の方が CSS3 の Working Draft に近いというか同じなので、Mozilla系でもそちらが使えるようになると良いですね。
右上を角丸にする場合
- Mozilla系(Gecko エンジン)
-moz-border-radius-topright: 10px;
- Safari(Webkit)
-webkit-border-top-right-radius: 10px;
右下を角丸にする場合
- Mozilla系(Gecko エンジン)
-moz-border-radius-bottomright: 10px;
- Safari(Webkit)
-webkit-border-bottom-right-radius: 10px;
左下を角丸にする場合
- Mozilla系(Gecko エンジン)
-moz-border-radius-bottomleft: 10px;
- Safari(Webkit)
-webkit-border-bottom-left-radius: 10px;
左上を角丸にする場合
- Mozilla系(Gecko エンジン)
-moz-border-radius-topleft: 10px;
- Safari(Webkit)
-webkit-border-top-left-radius: 10px;