border - 円の画像に枠線を追加

Question

通常の正方形の画像を自分のウェブサイトに追加し、border-radius の円にしてから、その周りに円の境界線を追加しようとしましたが、Chrome でしか機能しないようです。これを修正する方法について何か提案はありますか?

.face {
display: block;
margin: auto;
border-radius: 100%;
border: 5px solid #ff675b;}

問題のスクリーンショットは次のとおりです 。

Answer 1

HTML:

<div class="circleborder"><img class="face" src="img/face.jpeg" alt="face" width="130" height="130"></div>

CSS:

.face {
border-radius: 100%;}

.circleborder {
border: 5px solid #ff675b;
border-radius: 100%;
display: inline-block;}

助けてくれてありがとう！私たちが話している間、私は自分のソリューションをテストしており、それが私の Mac と iPhone の Chrome と Safari で動作することを確認しています! :D

Answer 2

これを試してみてください。

.clip-circle {
      clip-path: circle(60px at center);
      /* OLD VALUE example: circle(245px, 140px, 50px); */
      /* Yep, even the new clip-path has deprecated stuff. */
    }
    .clip-ellipse {
      clip-path: ellipse(60px 40px at 75px 30px);
      /* OLD VALUE example: ellipse(245px, 80px, 75px, 30px); */
    }
    .clip-polygon {
      clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
      /* Note that percentages work as well as px */
    }