LoginSignup
2

More than 3 years have passed since last update.

posted at

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

状況

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に載せて一人でも多くの方に届けばいいなと思い投稿させていただきました。
元記事作者の方、ありがとうございました。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
2