いや、これは単純に私が知らなかったというか、普通に使えると思い込んでいただけなんですけどね。
前のエントリで 「HTML5 + CSS でコバトン描いてみた」 っていうお遊びを紹介したのですが、その後 iPhone / iPad で確認してみたらコバトンさんのお顔が四角い顔になっていて、そこで初めて気がつきました。結論から言ってしまえば単なる勘違いという間抜けなお話ではありますが、メモ代わりにエントリ。
2012年5月14日追記
iOS のバージョンアップで border-radius プロパティに 「%」 値が使えるようになりましたので文末に関連エントリを追加しました。
iOS で見たらこんな感じになっていました…
で、冷静に考えれば、PC 版 Safari も 5.0 系 （Webkit） までは 「%」 値が使えなかったので、同じ Webkit ベースの iOS 版で使えないのは当たり前といえば当たり前ですね…とはいえ iOS も何度かバージョンアップしてるので普通に使えるようになってるものだとばかり思い込んでいました。思い込みって怖いですねぇ
ということで、border-radius プロパティに 「%」 値を指定する場合はお気をつけください。
ちなみに 「%」 値を使わずに真円を描きたい場合は、丸くしたい要素の縦 / 横サイズの半分の値を指定すれば同じ事ですよ。例えば下記のような感じ。
div {
width: 80px;
height: 80px;
border-radius: 40px;
background-color: #f00;
}
同じ要素に border が指定されている場合は、border-width の値を足してから半分にします。例えば 80px × 80px の div 要素の周囲に 5px 幅の border が指定されている状態を真円にしたい場合の border-radius は下記のようにします。
div {
width: 80px;
height: 80px;
border-radius: 45px; /* (80+5*2)/2 = 45px */
border: 5px solid #000;
background-color: #f00;
}
何でそうするのかというと、
The two length or percentage values of the 'border-*-radius' properties define the radii of a quarter ellipse that defines the shape of the corner of the outer border edge.
CSS Backgrounds and Borders Module Level 3 ： 5.1. The 'border-radius' properties から引用
border-radius プロパティが 「border edge （ボーダー辺 / 要するに border の外側のラインですね）」 のカーブを指定するものだから。つまり、border がある真円を描きたい場合は、ボーダー辺までの長さの半分を4角の円の半径にしないといけないということです。
まぁ border-width が 1px とかだと、それを計算に入れなくても見た目上は気がつかない程度なんですが、border-width の値が大きい場合は見た目が変わります。なので、「border-radius: 50%」 と 「%」 値が指定できるならそれが一番楽ということになります。
その他、border-radius の描写に関する細かいルールは仕様書、「CSS Backgrounds and Borders Module Level 3」 内の 「5.2. Corner Shaping」 から後ろ辺りに書いてあります（参考：日本語訳）。
