boxの角を丸くするCSSプロパティについてのまとめ。(W3CによるCSS草案とMozilla独自拡張)
W3C CSS3草案
開発中のWebkit(Safariで使用されるHTMLレンダリングエンジン)が対応。
border-radius
boxの4つの角すべてについて角の半径を指定する。
2値を指定した場合、最初の値が水平方向の半径、2番目の値が垂直方向の半径となる(書字方向が水平('writing-mode' is horizontal)の場合)。
border-top-right-radius
右上角の半径を指定。
border-bottom-right-radius
右下角の半径を指定。
border-bottom-left-radius
左下角の半径を指定。
border-top-left-radius
左上角の半径を指定。
Mozilla独自拡張
Mozilla系ブラウザ(Firefox等)が対応。
-moz-border-radius
boxの4つの角すべてについて角の半径を指定する。
複数の値を指定した場合:
- 2値: 最初の値が左上角・右下角の半径、2番目の値が右上角・左下角の半径。
- 3値: 最初の値が左上角の半径、2番目の値が右上角・左下角の半径、3番目の値が左下角の半径。
- 4値: 左上角、右上角、右下角、左下角の順。
-moz-border-radius-topright
右上角の半径を指定。
-moz-border-radius-bottomright
右下角の半径を指定。
-moz-border-radius-bottomleft
左下角の半径を指定。
-moz-border-radius-topleft
左上角の半径を指定。
相違点
- CSS3では楕円の角を指定できる。
- border-radiusでは1通りの値のみ。-moz-border-radiusでは4つの角にそれぞれ別の値を指定できる。
- 個別のプロパティの命名規則が異なる(TB: topまたはbottom、 LR: leftまたはright)
- CSS3: border-TB-LR-radius
- Mozilla拡張: -moz-border-radius-TBLR
両者を併用するときは注意しましょう。