border-radiusが勝手に付いてしまう（？）

Question

border-radiusをつける意図なく、元写真通り、四角全て直角で写真を表示したいのですが、何故か写真上部の角が丸まってしまいます。

誤りをご指摘頂けますと幸甚です。

<div class= 'card'>
 <a href="/user/products/1">
  <div class="card-block">
  <h4 class="card-title", style ="font-size:0.8rem;text-align:left;">mitsuoさん</h4>
  <h6 class="card-subtitle text-muted">Support card subtitle</h6>
  </div>
  <div class= 'wwrapper' >
   <img class="card-img-top" alt="profile_image" src="/assets/earring/01-66c3f0cfc0a7eb944c917151da4b13d3a7d0943255de044ead0bde9eabc5f5ac.jpg" />
     <div class="card-img-overlay productimg">
     <p class="card-title productbrand">PRADAイヤリング</p>
     </div>
   </div>
   <div class="card-block">
     <h6 class="card-text">長らく使用して...</h6>
     <h6 class="p-price ">2,000円</h6>
     <h6 class="top-like"><i class='fa fa-heart'>&nbsp2</i></h6>
     <h6 class="top-comment"><i class="fa fa-comment-o"></i></h6>
   </div><!--card-block-->
 </a>        
</div><!--card-->

.card {
   max-width: 15rem;
 }
.card-img-top {
   width: 100%;
   border-radius: 0;
 }
.wwrapper{
  position: relative;
}
.card-img-overlay.productimg{
  padding: 0rem;
}
.card-title.productbrand{
  background-color:rgba(0, 0, 0, 0.5);
  bottom: 0rem;
  color: $white;
  position: absolute;
  width: 100%;
  margin-bottom: 0rem;
}
.card-block{
  position: relative;
  height: 5rem;
}

Answer 1

ChromeのDeveloper Toolsなどで、要素を確認してみて下さい（当該要素を右クリックして「要素の検証」とするのが早いです）。実際にあたっているCSSが一覧となって出てくるので、border-radiusがどこにあるのか確認できます。

Comments

[innjera]

有難う御座います。アドバイス頂いた通り、要素の検証でborder-radiusが出ている場所を特定し、修正できました。

Answer 2

外部ライブラリ（bootstrapなど)をお使いでしょうか。もしそうならそういったライブラリのcssが悪さをしているかもしれません。

.card-img-top {
   width: 100%;
   border-radius: 0 !important;
 }

とするとborder-radiusが消えるかも。このやり方はあまり推奨しませんが・・・。

Comments

[innjera]

有難う御座います。ご指摘の通り、bootstrapのデフォルト設定による影響でした。