border-radius not showing on the top border - html

Question

#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.

Answer 1

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>

Answer 2

You're right; the image is blocking its parent's border. You need to add the border-radius property to the image as well:
#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;
}
.parent img { /* change this to select your particular image */
border-radius: 10px 10px 0 0;
}
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>
P.S. shrink the screen a bit when viewing the snippet. The image in particular that is affecting your output only appears on smaller screens.

Answer 3

You can use overflow: clip; on the container and not have scroll bars vs overflow: hidden; which might allow scroll bars.
I also noticed your white background bleeding through, a common issue with starkly differing colors like white/black. I fixed this by moving the white background to the .main-content container - there are several other ways if this is not acceptable.
#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;
overflow: clip;
}
picture {
display: block;
}
img {
width: 100%;
height: 100%;
}
.main-content {
padding: 1rem;
background-color: white;
}
.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>