border-radius not showing on the top border

November 18, 2022

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&family=Fraunces:opsz,wght@9..144,700&family=Rye&family=Seymour+One&family=Ultra&display=swap');
* {
  box-sizing: border-box;
}

body {
  background-color: black;
}

.parent {
  display: flex;
  flex-direction: column;
  max-width: 600px;
  font-family: "Montserrat";
  border-radius: 10px;
  margin: 20px;
  background-color: white;
}

picture {
  display: block;
}

img {
  width: 100%;
  height: 100%;
}

.main-content {
  padding: 1rem;
}

.cologne {
  text-transform: uppercase;
  letter-spacing: 0.5rem;
  color: #8f8f8f;
}

h1 {
  font-family: "Fraunces";
  overflow-wrap: break-word;
  color: #343434;
}

.description {
  color: #8f8f8f;
  overflow-wrap: break-word;
}

.price {
  display: flex;
  gap: 1rem;
  align-items: center;
  overflow-wrap: break-word;
}

.price p:nth-child(1) {
  font-size: 2rem;
  font-family: "Fraunces";
  color: #343434;
}

.price p:nth-child(2) {
  text-decoration: line-through;
}

.cart {
  width: 100%;
  padding: 0.5rem 0;
  font-family: inherit;
  color: #343434;
}

<main>
  <div class="parent">
    <picture>
      <source media="(max-width:700px)" srcset="https://images.unsplash.com/photo-1592921248991-dd940d2977e9?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg3MjQzMjg&ixlib=rb-4.0.3&q=80" />

      <img src="https://images.unsplash.com/photo-1514569369508-d2a48d3a423c?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg3MjQ3NTM&ixlib=rb-4.0.3&q=80" alt="perfume" />
    </picture>

    <div class="main-content">
      <span class="cologne">Lorem Ipsum</span>

      <h1>Lorem Ipsum Dolor Sit Amet</h1>

      <div class="description">
        Donec sit amet sapien elit. Etiam et pellentesque justo, id posuere justo. Donec urna neque, lobortis hendrerit ornare vel, laoreet vitae urna.</div>

      <div class="price">
        <p>$149.99</p>
        <p>$169.99</p>
      </div>

      <button class="cart" href="#">Add to Cart</button>
    </div>
  </div>
</main>

I created this product-preview card and I set the border-radius on the parent class, however, it is not showing at the top, I do not want this, is there a way to fix this, I suspect that the problem is with the image and that it is blocking the radius from showing in some way but I am not exactly sure.

>Solution :

Adding overflow: hidden; to the .parent container fixes that. Otherwise the "not-rounded" edges of the image overflow the container:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&family=Fraunces:opsz,wght@9..144,700&family=Rye&family=Seymour+One&family=Ultra&display=swap');
* {
  box-sizing: border-box;
}

body {
  background-color: black;
}

.parent {
  display: flex;
  flex-direction: column;
  max-width: 600px;
  font-family: "Montserrat";
  border-radius: 10px;
  margin: 20px;
  background-color: white;
  overflow: hidden;
}

picture {
  display: block;
}

img {
  width: 100%;
  height: 100%;
}

.main-content {
  padding: 1rem;
}

.cologne {
  text-transform: uppercase;
  letter-spacing: 0.5rem;
  color: #8f8f8f;
}

h1 {
  font-family: "Fraunces";
  overflow-wrap: break-word;
  color: #343434;
}

.description {
  color: #8f8f8f;
  overflow-wrap: break-word;
}

.price {
  display: flex;
  gap: 1rem;
  align-items: center;
  overflow-wrap: break-word;
}

.price p:nth-child(1) {
  font-size: 2rem;
  font-family: "Fraunces";
  color: #343434;
}

.price p:nth-child(2) {
  text-decoration: line-through;
}

.cart {
  width: 100%;
  padding: 0.5rem 0;
  font-family: inherit;
  color: #343434;
}

<main>
  <div class="parent">
    <picture>
      <source media="(max-width:700px)" srcset="https://images.unsplash.com/photo-1592921248991-dd940d2977e9?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg3MjQzMjg&ixlib=rb-4.0.3&q=80" />

      <img src="https://images.unsplash.com/photo-1514569369508-d2a48d3a423c?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg3MjQ3NTM&ixlib=rb-4.0.3&q=80" alt="perfume" />
    </picture>

    <div class="main-content">
      <span class="cologne">Lorem Ipsum</span>

      <h1>Lorem Ipsum Dolor Sit Amet</h1>

      <div class="description">
        Donec sit amet sapien elit. Etiam et pellentesque justo, id posuere justo. Donec urna neque, lobortis hendrerit ornare vel, laoreet vitae urna.</div>

      <div class="price">
        <p>$149.99</p>
        <p>$169.99</p>
      </div>

      <button class="cart" href="#">Add to Cart</button>
    </div>
  </div>
</main>