border-radius における個人的覚え書き

超個人的覚え書きです。

CSS に border-radius といういわゆる角丸を作るプロパティがあるんだけど、今のところ Mozilla系(Gecko エンジン)と Safari(Webkit)はそれらを独自拡張のプロパティで採用している。

実際に使うとこんな感じ。

Mozilla系(Gecko エンジン)
-moz-border-radius: 10px;
Safari(Webkit)
-webkit-border-radius; 10px:

で、ここまではまぁ良いんだけど、角別(右上だけ、とか)で指定しようとするとプロパティが両者で微妙に違うので間違えやすい。

Mozilla系 は radiustop とかなのに対して Webkit の場合は raiustop とか書いてあげる必要がある。

Webkit の方が CSS3 の Working Draft に近いというか同じなので、Mozilla系でもそちらが使えるようになると良いですね。

参考:border-radius - 徒委記

右上を角丸にする場合

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;

ads by LinkShare



About Author
trackfeed
feed meter
人気ブログランキング - Forest.Kの徒然日記
track word
あわせて読みたい
あわせて読みたい
解析
Firefox meter Chrome Counter Firefox3 Meter


特集 & 限定アルバム
iTunes Store Top Songs
iTunes Store Top Albums
  •  iTunes Store(Japan)