The rounded corners of the images inside a card don't look right

Issue

I have multiple cards with images inside those cards. I want the images to have rounded corners. The code kind of worked but the rounded corners don’t look right.

Unwanted result

For the images, I’m just using the Bootstrap class rounded. The images are scaled down but not distorted. This is the CSS for the cards:

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #F5F5F5;
  background-clip: border-box;
  border: 0.0625rem solid #E5E7EB;
  border-radius: 1rem; }

Simplified HTML:

    <div class="card border-0 p-3 p-md-3 p-lg-4 mb-3">
      <div class="row pb-4 text-left">
        <div class="col-1 ps-1">
          <h1 class="id-circle">B</h1>
        </div>
        <div class="col-11">
          <span class="description details-text pe-1">Text</span>
        </div>
      </div>
      <div class="row gy-3 mb-1 pb-0">
        <div class="col-lg-6 col-md-6 col-sm-6 pb-0">
          <div class="row pt-0 pb-0 image-row">
            <img class="rounded" src="https://picsum.photos/id/237/300/200">
          </div>
        </div>
      </div>
   </div>

Any ideas of what could be happening? Please let me know if more info is needed.

Solution

Check below snippet: with your CSS and HTML, in both cases the bootstrap creates a small rounded corner of 4px around the images using .rounded { border-radius: .25rem !important } (Firefox DevTools). In fact, with your HTML (second card), the rounded borders of the image are gone.

Still not showing the unwanted result you are experiencing. Something else in your CSS creates the result.

The odd border radius in the image is not reproducable on Stackoverflow with your code.

I added below CSS to override bootstrap .rounded in my Codepen test and got the same unwanted result. You must have done something similar. However, I still don’t see it happening here on SO.

My Codepen: SO74554098

.rounded {
    border-radius: 1rem !important;
}

The best option would, indeed, be to create a specific card layout for the images (as OP commented, ‘card in a card’) and use bootstrap .rounded or a custom class with border-radius set.

.card {
  /* added for test */
  padding: 1rem; margin: 1rem; outline: 1px solid black;
  /**/
  
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #f5f5f5;
  background-clip: border-box;
  border: 0.0625rem solid #e5e7eb;
  border-radius: 1rem;
}

.rounded {
  border-radius: 1rem !important;
}
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
<h3>only .card > .rounded</h3>
<div class="card">
  <img class="rounded" src="https://picsum.photos/id/237/300/200">
</div>

<h3>OP code with full bootstrap CSS (5.0.2)</h3>
<div class="card border-0 p-3 p-md-3 p-lg-4 mb-3">
  <div class="row pb-4 text-left">
    <div class="col-1 ps-1">
      <h1 class="id-circle">B</h1>
    </div>
    <div class="col-11">
      <span class="description details-text pe-1">Text</span>
    </div>
  </div>
  <div class="row gy-3 mb-1 pb-0">
    <div class="col-lg-6 col-md-6 col-sm-6 pb-0">
      <div class="row pt-0 pb-0 image-row">
        <img class="rounded" src="https://picsum.photos/id/237/300/200">
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.min.js"></script>
</body>
</html>

Answered By – Rene van der Lende

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published