スマホ実機（iOS Safari）でborder-radiusが効かないときの対処法

ブラウザのエミュレーターで確認するとborder-radiusがちゃんと効いているのに、スマホ実機（iOS Safari）で確認すると効いていないという現象が起こりました。

その対処法を備忘録がてら共有しておこうと思います。またハマりそうなので…。

スマホ実機のSafariでborder-radiusが効かないときの対処法

対処法は簡単、z-indexを指定するだけです。

.hoge {
  border-radius: 5px;
  z-index: 1; /* ←ここ！ */
}

とりあえず指定してあれば大丈夫そうなので値は適宜変えてokです。僕はこれで治りました。

スマホ実機でデベロッパーツールを使ってコードを確認する方法を過去記事で紹介しているので参考程度にどうぞ。

実機で確認しつつコードを見ていくと解決のヒントが見つかりやすいかもです。

ZennでCSS設計の
本を書きました！

「CSS設計をちょっと勉強したけど
結局よくわからなかった…」
そんな人に読んでほしい一冊です！