border-radius not showing on the top border-CodePudding

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&family=Fraunces:opsz,[email protected],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 >
    <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 >
      <span >Lorem Ipsum</span>

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

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

      <div >
        <p>$149.99</p>
        <p>$169.99</p>
      </div>

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

CodePudding user response：

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,[email protected],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 >
    <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 >
      <span >Lorem Ipsum</span>

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

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

      <div >
        <p>$149.99</p>
        <p>$169.99</p>
      </div>

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

CodePudding user response：

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,[email protected],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 >
    <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 >
      <span >Lorem Ipsum</span>

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

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

      <div >
        <p>$149.99</p>
        <p>$169.99</p>
      </div>

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

CodePudding user response：

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,[email protected],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 >
    <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 >
      <span >Lorem Ipsum</span>
      <h1>Lorem Ipsum Dolor Sit Amet</h1>
      <div >
        Donec sit amet sapien elit. Etiam et pellentesque justo, id posuere justo. Donec urna neque, lobortis hendrerit ornare vel, laoreet vitae urna.</div>
      <div >
        <p>$149.99</p>
        <p>$169.99</p>
      </div>
      <button  href="#">Add to Cart</button>
    </div>
  </div>
</main>