More than 5 years have passed since last update.

safariでborder-radiusが動いてない時の解決法

Posted at 2018-12-20

#状況
border-radiusを設定した際、safari上で思うように動いていないってことがありました。

.element {
  border-radius: 50%;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

僕の時はこんな感じだったような気がします。(どうでもいい)

#サクッと解決策

border-radiusがかかっている要素にz-indexをつけるだけ!

.element {
  z-index: 1; /*僕は1でしたが、多分状況に応じて値を変えても大丈夫かと思います。*/
  border-radius: 50%;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

###参考
Safariでborder-radiusの指定が効かない
恐縮ながら、ほぼ同じことを書かせていただいておりますが、この記事にたどり着けず諦める方が出ないよう、qiitaに載せて一人でも多くの方に届けばいいなと思い投稿させていただきました。
元記事作者の方、ありがとうございました。