CSSのborder-radiusプロパティを%で指定すると、適用されない機種がある
公開日：
こんにちは。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指定を行うようにしましょう。
※本記事は、弊社開発チーム所有機での確認結果であり、全機種調査の結果ではありません。同一機種であっても、この現象が必ず発生することを保証するものではありません。これ以外や例外のある可能性がありますことをご了承ください。
Tweet
