編集(管理者用) | 編集 | 差分 | 新規作成 | 一覧 | RSS | 表紙 | 検索 | 更新履歴

border-radius

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つの角すべてについて角の半径を指定する。

複数の値を指定した場合:

-moz-border-radius-topright

右上角の半径を指定。

-moz-border-radius-bottomright

右下角の半径を指定。

-moz-border-radius-bottomleft

左下角の半径を指定。

-moz-border-radius-topleft

左上角の半径を指定。

相違点

両者を併用するときは注意しましょう。