border-radius not showing on the top border

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>

PS 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>