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

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 >
      <div >
        <div >
          <h1 >B</h1>
        </div>
        <div >
          <span >Text</span>
        </div>
      </div>
      <div >
        <div >
          <div >
            <img  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.

CodePudding user response：

Try doing

border-radius: 25px;

sometimes rem doesn't work for border radius

CodePudding user response：

under construction

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.

For now, the odd border radius in the image is not reproducable with your code.

update

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

My Codepen: SO74554098

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

.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 >
  <img  src="https://picsum.photos/id/237/300/200">
</div>

<h3>OP code with full bootstrap CSS (5.0.2)</h3>
<div >
  <div >
    <div >
      <h1 >B</h1>
    </div>
    <div >
      <span >Text</span>
    </div>
  </div>
  <div >
    <div >
      <div >
        <img  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>