CSSのborder-radiusプロパティを%で指定すると、適用されない機種がある

CSS角丸

こんにちは。x-fit開発チームの山本です。

border-radiusは、いわゆる「角丸」をまとめて指定するためのCSSプロパティです。指定はpxなどの直接指定、または%での相対指定で行います。

border-radiusを%で指定した場合、適用されない現象が確認できたので、少し調べてみました。

【HTMLコード】

ブロック要素に対して、border-radiusをpx、%それぞれで指定し、実機で見た目を確認してみます。

コード例(抜粋)は以下のようなものです。

<style type="text/css">
.percent {
width: 100px;
height: 50px;
border: solid 1px #000000;
border-radius: 15% 15% 15% 15%/30% 30% 30% 30%;
}
.pixel {
width: 100px;
height: 50px;
border: solid 1px #000000;
border-radius: 15px 15px 15px 15px/15px 15px 15px 15px;
}
</style>
<body>
<p>border-radius % definition on canvas</p>
<canvas class="percent"></canvas>
<p>border-radius px definition on canvas</p>
<canvas class="pixel"></canvas>
</body>

【確認結果】

スクリーンショット

現象が発生する場合(IS03)

現象が発生しない場合(Galaxy Nexus)

機種名  OS・Version %指定が適用
されない現象が
発生するか
iPhone 4  iOS 4.0 発生
iPhone 4S  iOS 5.0 発生しない
Xperia  Android_1.6 発生※
IS04  Android_2.1 発生
IS03  Android_2.2 発生
Xperia arc  Android_2.3 発生
GALAXY NEXUS  Android_4.0 発生しない
IS12T Windows Phone 7.5 発生しない

※Xperia(Android1.6)では、px指定も適用されませんでした。

【対応】

%指定を使わず、px指定を行うようにしましょう。

※本記事は、弊社開発チーム所有機での確認結果であり、全機種調査の結果ではありません。同一機種であっても、この現象が必ず発生することを保証するものではありません。これ以外や例外のある可能性がありますことをご了承ください。

弊社では実機を使用しての検証サービスを3タイプご用意しております。
こちらのサービスも合わせてご検討ください。
実機検証サービスはこちら