ボーダー半径が機能しません

Question

プロファイル写真の輪郭線を作成しようとしていますが、CSSを動作させることができません。私は唯一の代わりに円の正方形の面積を取得jsfiddleでこれをしようとすると、私のCSSとHTMLコードが

.author-image { 
 
    width: 50px; 
 
    height: 50px; 
 
    border-radius: 50%; 
 
}

<div class="author-info"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Avatar&w=150&h=150" class="author-image"> 
 
</div>

下に表示されます。私はここで何が欠けているのですか？

Answer 1

srcに画像がありません。ほとんどのブラウザーでは、「画像が見つかりません」というアイコンが表示されます。それはすぐに私が1つを追加しました。

<div class="author-info"> 
    <img src="http://combiboilersleeds.com/images/image/image-3.jpg" class="author-image"> 
</div> 

.author-image { 
    border-radius: 50%; 
    height: 50px; 
    width: 50px; 
} 

Answer 2

問題の原因となっている空のイメージをカバーするのは「境界」です。 たとえば、画像に背景色（または有効な画像パス）を指定すると、境界の丸めが正常に機能していることがわかります。

.author-image { 
 
    width: 50px; 
 
    height: 50px; 
 
    border-radius: 50%; 
 
    background-color:#555; 
 
}

<div class="author-info"> 
 
    <img src="" class="author-image"> 
 
</div>