Coder's Note

CSS3メモ「border-radius」の指定方法

CSS3で使えるようになるborder-radius。角丸を作るために超絶便利なプロパティですが、現状ではベンダープリフィックスを使ってブラウザごとに指定することになります。
ただ、その指定がブラウザによって微妙に違って覚えられないのでメモ。

仕様書にかかれている指定方法

http://www.w3.org/TR/css3-background/#border-radiusに書かれている書き方です。

対応ブラウザ

  • Opera

全体に指定

border-radius: 10px;

角ごとに指定

border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;

webkit

指定方法は仕様書と同じですが、-webkit-というベンダープリフィックスをつける必要があります。

対応ブラウザ

  • Safari
  • Chrome

全体に指定

-webkit-border-radius: 10px;

角ごとに指定

-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;

Firefox

角ごとに指定する場合の方法が微妙に違います。ベンダープリフィックスは-moz-です。

全体に指定

-moz-border-radius: 10px;

角ごとに指定

-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;